local font not working on nextjs , antd on ConfigProvider

11 Replies

Hi @᲼. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 array in your 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"
  ],
};

However, it's worth noting that in some cases, as mentioned in this GitHub issue, removing the 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>

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 :speech_balloon: ----------------------

kapa.ai•2w ago

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

adverse-sapphireOP•2w ago

@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 ?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- 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: 1. Using Next.js Font Module (recommended for Next.js 13+):

   // In pages/_app.tsx or a shared layout component
   import { Inter, YourLocalFont } from 'next/font/local'
   
   // Load your local font
   const 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
     }
   }}>

   // In pages/_app.tsx or a shared layout component
   import { Inter, YourLocalFont } from 'next/font/local'
   
   // Load your local font
   const 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
     }
   }}>

2. Using CSS (traditional approach):

   /* 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;
   }

   /* 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 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>

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 :speech_balloon: ----------------------

kapa.ai•2w ago

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

adverse-sapphireOP•2w ago

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

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- 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;
}

Make sure to: 1. Place your TTF file in the public/fonts/ directory of your Next.js project 2. Import this CSS file in your _app.tsx 3. 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"
  }
}}>

Remember that you may still need to add the appropriate packages to the transpilePackages array in your 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 :speech_balloon: ----------------------

kapa.ai•2w ago

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

adverse-sapphireOP•2w ago

@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

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that your font issue is resolved! Yes, that's an important distinction in the CSS @font-face declaration. The correct format specifier for TTF files is indeed 'truetype' and not '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;
}

This is a common mistake when working with font formats in CSS. The 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 :speech_balloon: ----------------------

kapa.ai•2w ago

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

local font not working on nextjs , antd on ConfigProvider

Did you find this page helpful?