local font not working on nextjs , antd on ConfigProvider

K

kapa.ai•4/18/25, 8:30 AM

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

K

kapa.ai•4/18/25, 8:30 AM

----------------------
Based on the knowledge sources, there appears to be some challenges with font customization when using Next.js with Ant Design in refine applications. This is related to how Next.js handles module transpilation.

The issue you're experiencing with local fonts not working in the ConfigProvider with Next.js and Ant Design is likely due to Next.js not properly transpiling the Ant Design packages.

The solution is to add the relevant packages to the

transpilePackages

transpilePackages

transpilePackages

transpilePackages array in your

next.config.js

next.config.js

next.config.js

next.config.js file:

/** @type {import('next').NextConfig} */
module.exports = {
  transpilePackages: [
    "@refinedev/antd",
    "@refinedev/inferencer",
    "antd",
    "@ant-design/icons",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider"
  ],
};

/** @type {import('next').NextConfig} */
module.exports = {
  transpilePackages: [
    "@refinedev/antd",
    "@refinedev/inferencer",
    "antd",
    "@ant-design/icons",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider"
  ],
};

/** @type {import('next').NextConfig} */
module.exports = {
  transpilePackages: [
    "@refinedev/antd",
    "@refinedev/inferencer",
    "antd",
    "@ant-design/icons",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider"
  ],
};

/** @type {import('next').NextConfig} */
module.exports = {
  transpilePackages: [
    "@refinedev/antd",
    "@refinedev/inferencer",
    "antd",
    "@ant-design/icons",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider"
  ],
};

However, it's worth noting that in some cases, as mentioned in this GitHub issue, removing the

transpilePackages

transpilePackages

transpilePackages

transpilePackages configuration might also solve certain problems. The behavior seems to vary depending on the specific versions of Next.js and Ant Design being used.

For font customization specifically, you should ensure you're properly configuring the theme in the ConfigProvider. Here's an example of how to set it up in your Next.js application:

import { ConfigProvider } from "antd";
import { RefineThemes } from "@refinedev/antd";

// Create a custom theme with your font family
const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

// In your _app.tsx
<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

import { ConfigProvider } from "antd";
import { RefineThemes } from "@refinedev/antd";

// Create a custom theme with your font family
const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

// In your _app.tsx
<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

import { ConfigProvider } from "antd";
import { RefineThemes } from "@refinedev/antd";

// Create a custom theme with your font family
const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

// In your _app.tsx
<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

import { ConfigProvider } from "antd";
import { RefineThemes } from "@refinedev/antd";

// Create a custom theme with your font family
const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

// In your _app.tsx
<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

K

kapa.ai•4/18/25, 8:30 AM

Make sure your local font is properly loaded in your Next.js application, typically through a font loader or by including it in your global CSS.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•4/18/25, 8:30 AM

@272684600247975937 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

U

uncertain-scarletOP•4/18/25, 8:43 AM

@kapa.ai Make sure your local font is properly loaded in your Next.js application, typically through a font loader or by including it in your global CSS.
how ?

K

kapa.ai•4/18/25, 8:43 AM

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

K

kapa.ai•4/18/25, 8:43 AM

----------------------
I understand you're asking about how to properly load local fonts in your Next.js application when using refine with Ant Design. While the knowledge sources don't provide specific details about font loading in Next.js, I can provide some general guidance based on Next.js best practices that would apply to refine applications.

In a Next.js application, you can load local fonts in a few ways:

**Using Next.js Font Module (recommended for Next.js 13+)**:```jsx// In pages/_app.tsx or a shared layout componentimport { Inter, YourLocalFont } from 'next/font/local'// Load your local fontconst myLocalFont = YourLocalFont({ src: '../path/to/your-font-file.woff2', display: 'swap',})// Then in your ConfigProvider<ConfigProvider theme={{ ...RefineThemes.Blue, token: { ...RefineThemes.Blue.token, fontFamily: myLocalFont.style.fontFamily }}}>```
**Using CSS (traditional approach)**:```css/* In your global CSS file (e.g., styles/globals.css) */@font-face { font-family: 'YourLocalFont'; src: url('/fonts/your-font-file.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;}```Then import this CSS file in your `_app.tsx` and reference the font in your ConfigProvider as shown in my previous answer.

When using the CSS approach, make sure to place your font files in the

public

public

directory of your Next.js project so they can be served as static assets.

After loading the font, you can then use it in your Ant Design theme configuration as previously described:

const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

const customTheme = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
};

<ConfigProvider theme={customTheme}>
  {/* Your app components */}
</ConfigProvider>

K

kapa.ai•4/18/25, 8:43 AM

Remember that when using refine with Next.js and Ant Design, you may need to ensure proper transpilation as mentioned in my previous answer to avoid styling issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•4/18/25, 8:43 AM

@272684600247975937 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

U

uncertain-scarletOP•4/18/25, 8:44 AM

@kapa.ai it will can using about ttf file ?

K

kapa.ai•4/18/25, 8:44 AM

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

K

kapa.ai•4/18/25, 8:44 AM

----------------------
Yes, you can use TTF font files in your Next.js application with refine and Ant Design. TTF (TrueType Font) is a supported font format that works well in modern browsers.

When using the CSS approach I mentioned earlier, you would simply reference your TTF file:

/* In your global CSS file (e.g., styles/globals.css) */
@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* In your global CSS file (e.g., styles/globals.css) */
@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* In your global CSS file (e.g., styles/globals.css) */
@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* In your global CSS file (e.g., styles/globals.css) */
@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Make sure to:

Place your TTF file in the
```
public/fonts/
```
public/fonts/
```
public/fonts/
```
public/fonts/
directory of your Next.js project
Import this CSS file in your
```
_app.tsx
```
_app.tsx
```
_app.tsx
```
_app.tsx
Reference the font in your Ant Design ConfigProvider:

<ConfigProvider theme={{
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
}}>

<ConfigProvider theme={{
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
}}>

<ConfigProvider theme={{
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
}}>

<ConfigProvider theme={{
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    fontFamily: "YourLocalFont, sans-serif"
  }
}}>

Remember that you may still need to add the appropriate packages to the

transpilePackages

transpilePackages

transpilePackages

transpilePackages array in your

next.config.js

next.config.js

next.config.js

next.config.js file as mentioned in our previous conversation to ensure proper styling with Ant Design in Next.js.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•4/18/25, 8:44 AM

@272684600247975937 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

U

uncertain-scarletOP•4/18/25, 8:47 AM

@kapa.ai oh it working right now my issue is
src: url('/fonts/your-font-file.ttf') format('ttf'); not src: url('/fonts/your-font-file.ttf') format('truetype');
thx

K

kapa.ai•4/18/25, 8:47 AM

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

K

kapa.ai•4/18/25, 8:47 AM

----------------------
I'm glad to hear that your font issue is resolved! Yes, that's an important distinction in the CSS

@font-face

@font-face

@font-face

@font-face declaration. The correct format specifier for TTF files is indeed

'truetype'

'truetype'

'truetype'

'truetype' and not

'ttf'

'ttf'

'ttf'

'ttf':

@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourLocalFont';
  src: url('/fonts/your-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

This is a common mistake when working with font formats in CSS. The

format()

format()

format()

format() value needs to match the standardized format name rather than the file extension.

Now that your local font is loading correctly, you should be able to use it successfully in your refine application with Ant Design's ConfigProvider.

Thank you for sharing the solution - it might help other refine users who encounter similar font loading issues with Next.js and Ant Design!
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

K

kapa.ai•4/18/25, 8:47 AM

@272684600247975937 Kapa.ai is still learning and improving, please let me know how I did by reacting below.