Refine•2y ago

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

kapa.ai•6/4/24, 9:00 PM

Hi @berdai labs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•6/4/24, 9:01 PM

----------------------
To change the typography font in your Refine app using Ant Design, you can customize the theme using the

ConfigProvider

ConfigProvider

component. Below is an example of how you can override the typography settings in your theme:

In this example, the

ConfigProvider

ConfigProvider

component is used to customize the theme, including the typography settings. The 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

createTheme

. Here is an example:

```typescript
import { RefineThemes } from "@refinedev/mui";
import { TypographyVariantsOptions, createTheme } from "@mui/material/styles";

kapa.ai•6/4/24, 9:01 PM

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

----------------------

kapa.ai•6/4/24, 9:01 PM

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

living-lavender•6/6/24, 1:57 PM

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

kapa.ai•6/6/24, 1:57 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/6/24, 1:57 PM

----------------------
To change the typography font in your Refine app using Material-UI, you need to override the theme's typography settings using

createTheme

createTheme

. Below is an example of how you can achieve this:

Define the typography options:

Create the overridden theme:

Apply the theme using :

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

By following these steps, you can successfully change the typography font in your Refine app using Material-UI.

kapa.ai•6/6/24, 1:57 PM

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

----------------------

kapa.ai•6/6/24, 1:57 PM

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

awake-maroonOP•6/6/24, 5:19 PM

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

kapa.ai•6/6/24, 5:19 PM

Let me check the knowledge base for you. One moment!

kapa.ai•6/6/24, 5:20 PM

----------------------
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:
UI Lib: Shadcn, NextUI.
Data/Live Provider: PocketBase.
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

----------------------

kapa.ai•6/6/24, 5:20 PM

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