change the typography font of refine next app

I need to change the typography text in my app but i m not sure that i should to change it in theme using antdesign

8 Replies

Hi @berdai labs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the typography font in your Refine app using Ant Design, you can customize the theme using the ConfigProvider component. Below is an example of how you can override the typography settings in your theme:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  

const App: React.FC = () => {  
  return (  
    <ConfigProvider  
      theme={{  
        components: {  
          Typography: {  
            colorTextHeading: "#1890ff",  // Example of changing text color
          },  
        },  
        token: {  
          fontFamily: "Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",  // Custom font family
        },  
      }}  
    >  
      <Refine  
      /* ... */  
      >  
        <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
      </Refine>  
    </ConfigProvider>  
  );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { ConfigProvider } from "antd";  

const App: React.FC = () => {  
  return (  
    <ConfigProvider  
      theme={{  
        components: {  
          Typography: {  
            colorTextHeading: "#1890ff",  // Example of changing text color
          },  
        },  
        token: {  
          fontFamily: "Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",  // Custom font family
        },  
      }}  
    >  
      <Refine  
      /* ... */  
      >  
        <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
      </Refine>  
    </ConfigProvider>  
  );  
};

In this example, the ConfigProvider component is used to customize the theme, including the typography settings. The fontFamily property is set to a custom font stack. For more detailed information, you can refer to the Ant Design documentation on customizing themes (https://ant.design/docs/react/customize-theme#use-preset-algorithms). If you are using Material-UI instead of Ant Design, you can follow the instructions provided in the knowledge sources to override the typography settings using createTheme. Here is an example:

import { RefineThemes } from "@refinedev/mui";  
import { TypographyVariantsOptions, createTheme } from "@mui/material/styles";
const typographyOptions: TypographyVariantsOptions = {  
  fontFamily: [  
    "Montserrat",  
    "-apple-system",  
    "BlinkMacSystemFont",  
    '"Segoe UI"',  
    "Roboto",  
    '"Helvetica Neue"',  
    "Arial",  
    "sans-serif",  
    '"Apple Color Emoji"',  
    '"Segoe UI Emoji"',  
    '"Segoe UI Symbol"',  
  ].join(","),  
};  

const overriddenLightTheme = createTheme({  
  ...RefineThemes.Blue,  
  typography: {  
    ...typographyOptions,  
  },  
});

import { RefineThemes } from "@refinedev/mui";  
import { TypographyVariantsOptions, createTheme } from "@mui/material/styles";
const typographyOptions: TypographyVariantsOptions = {  
  fontFamily: [  
    "Montserrat",  
    "-apple-system",  
    "BlinkMacSystemFont",  
    '"Segoe UI"',  
    "Roboto",  
    '"Helvetica Neue"',  
    "Arial",  
    "sans-serif",  
    '"Apple Color Emoji"',  
    '"Segoe UI Emoji"',  
    '"Segoe UI Symbol"',  
  ].join(","),  
};  

const overriddenLightTheme = createTheme({  
  ...RefineThemes.Blue,  
  typography: {  
    ...typographyOptions,  
  },  
});

For more information on overriding variables in Material-UI, you can refer to the documentation (https://refine.dev/docs/ui-integrations/material-ui/theming/#overriding-variables). Choose the approach that matches the UI library you are using in your Refine project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@911563296493142046> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•7mo ago

@kapa.ai how about in the case of material and not Ant Design?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To change the typography font in your Refine app using Material-UI, you need to override the theme's typography settings using createTheme. Below is an example of how you can achieve this: 1. Define the typography options:

import { TypographyVariantsOptions, createTheme } from "@mui/material/styles";

const typographyOptions: TypographyVariantsOptions = {
  fontFamily: [
    "Montserrat",
    "-apple-system",
    "BlinkMacSystemFont",
    '"Segoe UI"',
    "Roboto",
    '"Helvetica Neue"',
    "Arial",
    "sans-serif",
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
  ].join(","),
};

import { TypographyVariantsOptions, createTheme } from "@mui/material/styles";

const typographyOptions: TypographyVariantsOptions = {
  fontFamily: [
    "Montserrat",
    "-apple-system",
    "BlinkMacSystemFont",
    '"Segoe UI"',
    "Roboto",
    '"Helvetica Neue"',
    "Arial",
    "sans-serif",
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
  ].join(","),
};

2. Create the overridden theme:

import { RefineThemes } from "@refinedev/mui";

const overriddenLightTheme = createTheme({
  ...RefineThemes.Blue,
  typography: {
    ...typographyOptions,
  },
});

import { RefineThemes } from "@refinedev/mui";

const overriddenLightTheme = createTheme({
  ...RefineThemes.Blue,
  typography: {
    ...typographyOptions,
  },
});

3. Apply the theme using ThemeProvider:

import { ThemeProvider } from "@mui/material/styles";
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/mui";

const App: React.FC = () => {
  return (
    <ThemeProvider theme={overriddenLightTheme}>
      <Refine>
        <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
      </Refine>
    </ThemeProvider>
  );
};

import { ThemeProvider } from "@mui/material/styles";
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/mui";

const App: React.FC = () => {
  return (
    <ThemeProvider theme={overriddenLightTheme}>
      <Refine>
        <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
      </Refine>
    </ThemeProvider>
  );
};

4. Ensure the font is loaded in your index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap">
      rel="stylesheet"
    />
    <title>Refine adding font family example</title>
  </head>
  <body>
    ...
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap">
      rel="stylesheet"
    />
    <title>Refine adding font family example</title>
  </head>
  <body>
    ...
  </body>
</html>

By following these steps, you can successfully change the typography font in your Refine app using Material-UI. For more detailed information, you can refer to the Material-UI documentation for theme customization (https://mui.com/material-ui/customization/theming/) and the Refine documentation on overriding variables (https://refine.dev/docs/ui-integrations/material-ui/theming/#overriding-variables). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@918155659520925747> kapa.ai is still learning and improving, please let us know how it did by reacting below

raw-harlequinOP•7mo ago

@kapa.ai do you plan to add shadcnui in your superplate

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information available in the knowledge sources, there is no specific mention of plans to add Shadcn UI to Superplate. However, there is a discussion on the Refine GitHub repository where a user suggested integrating Shadcn UI along with other libraries:

These are the Integration which i wanna see in future of refine: 1. UI Lib: Shadcn, NextUI. 2. Data/Live Provider: PocketBase. 3. Auth Providers: Next-Auth/Auth.js

The official response to this suggestion was:

Hello @AriaFantom, thanks for the suggestions! We are open to contributions for any integration from the community. We already have NextAuth example, you can see it here: https://refine.dev/docs/examples/next-js/NextAuth-js/

This indicates that while there is interest in integrating Shadcn UI, it may depend on community contributions. If you are interested in this integration, you might consider contributing to the project or following the discussions on their GitHub repository for updates. For more details, you can refer to the discussion on GitHub (https://github.com/refinedev/refine/discussions/5491). If you have any further questions or need more information, you can also check the Refine documentation (https://refine.dev/docs) or the Shadcn UI documentation (https://ui.shadcn.com/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@911563296493142046> kapa.ai is still learning and improving, please let us know how it did by reacting below