Custom font doesn't work

[fiorins]

Description

Hi, I don't know either it's a bug or not. I have some font installed via fontsource while others I want to add manually, so I'm following this guide (https://chakra-ui.com/community/recipes/using-fonts) to do it but when I try to get custom font it doesn't work. Here it is my code.

my Fonts.tsx:

import { Global } from "@emotion/react";

export const Fonts = () => (
  <Global
    styles={`
      @font-face {
        font-family: "Quincy CF Regular";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: url('./assets/fonts/Quincy-CF-Regular.woff2') format('woff2'), url('./assets/fonts/Quincy-CF-Regular.woff') format('woff');
        unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F, U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
      }
      @font-face {
        font-family: "Quincy CF Light";
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url('./assets/fonts/Quincy-CF-Light.woff2') format('woff2'), url('./assets/fonts/Quincy-CF-Light.woff') format('woff');
        unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F, U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B; 
      }   
      @font-face {
        font-family: "Quincy CF Bold";
        font-style: bold;
        font-weight: 700;
        font-display: swap;
        src: url('./assets/fonts/Quincy-CF-Bold.woff2') format('woff2'), url('./assets/fonts/Quincy-CF-Bold.woff') format('woff');
        unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F, U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
      }
    `}
  />
);

my theme.tsx:

import { extendTheme, type ThemeConfig, theme as base } from "@chakra-ui/react";
import "@fontsource/righteous";
import "@fontsource/montserrat";
import "@fontsource/source-code-pro";

const fonts: any = {
  heading: `'Righteous', ${base.fonts?.heading}, cursive`,
  body: `'Montserrat', ${base.fonts?.body}, sans-serif`,
  mono: `'Source Code Pro', ${base.fonts?.body}, monospace`,
  subHeading: `'Quincy CF Regular', ${base.fonts?.heading}, sans-serif`,
};

const theme = extendTheme({ fonts, config });

export default theme;

my App.tsx:

import * as React from "react";
import {
  ChakraProvider,
  Box
} from "@chakra-ui/react";
import theme from "./theme";
import { Fonts } from "./Fonts";

export const App = () => (
  <ChakraProvider theme={theme}>
    <Fonts />
    <Box fontSize="xl">
      ...
    </Box>
  </ChakraProvider>
);

my Component.tsx:

<Heading size="md" fontFamily={"subHeading"}>
    Lorem ipsum dolor sit
</Heading>

What am I wrong ?

Chakra UI Version

2.5.4

[pavankpdev]

I'm facing the same issue as well, @fiorins were you able to resolve this? If yes, can you share your the fix.

[fiorins]

I'm facing the same issue as well, @fiorins were you able to resolve this? If yes, can you share your the fix.

Hi, YES, I found another way other than the one described in the documentation since that doesn't seem to work, and I made a guide to use custom fonts. Look at here.

[MadcowD]

I found this doesnt work when extending the pro theme:

  const myTheme = extendTheme(
    {
      // colors: {
      //   ...theme.colors,
      //   // brand: theme.colors.purple,
      //   // brand: {
      //   // 100: "#f7fafc",
      //   // ...
      //   // 500: "rgb(238, 238, 254)",
      //   // 900: "#1a202c",
      //   // },
      //   // accent: "#fffff",
      // },

      colors: { ...baseTheme.colors, brand: baseTheme.colors.purple },
      fonts: {
        heading: `'Manrope', sans-serif`,
        body: `'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
        // body: "Courier New, Courier, monospace",
      },
      fontSizes: {
        xs: "10px",
        sm: "12px",
        md: "14px",
        lg: "16px",
        xl: "18px",
        "2xl": "20px",
        "3xl": "24px",
        "4xl": "28px",
        "5xl": "36px",
        "6xl": "48px",
      },
      sizes: {
        xs: "18.75rem",
      },
    },
    proTheme
  )

But if you just add:

  myTheme.fonts = {
  heading: `'Manrope', sans-serif`,
  body: `'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
  // body: "Courier New, Courier, monospace",
}

It works. I suspect there is some issue with extension

[brodwen83]

I'm facing the same issue as well, @fiorins were you able to resolve this? If yes, can you share your the fix.

Hi, YES, I found another way other than the one described in the documentation since that doesn't seem to work, and I made a guide to use custom fonts. Look at here.

still not working fir me...

[fiorins]

I'm facing the same issue as well, @fiorins were you able to resolve this? If yes, can you share your the fix.

Hi, YES, I found another way other than the one described in the documentation since that doesn't seem to work, and I made a guide to use custom fonts. Look at here.

still not working fir me...

Have you imported styles.css into index.js? Is your app created with CRA ?

[eminx]

I have tried everything and I got stuck in this bug. I really have no clue, my previous branch implementation was totally fine, and everything in the theme except the fonts is working.

See here (onlyfonts NOT WORKING???): https://github.com/eminx/cocoso/blob/sexythumbs/imports/ui/utils/constants/theme.js vs. here (WORKING): https://github.com/eminx/cocoso/blob/develop/imports/ui/utils/constants/theme.js

It's really weird, I have never experienced a bug this much hidden.

[michael-gillett]

I just ran into a similar issue after I upgraded to framer-motion": "^10.16.1", downgrading back to framer-motion": "^10.15.0" resolved the issue.

This is with the following chakra versions

"@chakra-ui/icons": "^2.1.0",
"@chakra-ui/react": "^2.8.0",
"@chakra-ui/system": "^2.6.0",
"@chakra-ui/theme-tools": "^2.1.0",

[bernardomoraes]

For those who are still seeking a solution, this post resolved the issue for me. The information provided by the author of the Stack Overflow answer should unquestionably be included in the documentation, it would have saved me and others a lot of time.

[patrickleemsantos]

I just want to share the solution i made that works for me.

1. First i created a css file to add the font faces (ex. fonts.css).

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("./assets/fonts/ProximaNovaA-Light.ttf") format("ttf");
    unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
        U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./assets/fonts/ProximaNovaA-Regular.ttf") format("ttf");
    unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
        U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./assets/fonts/ProximaNovaA-Semibold.ttf") format("ttf");
    unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
        U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./assets/fonts/ProximaNovaA-Bold.ttf") format("ttf");
    unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
        U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("./assets/fonts/ProximaNovaA-Black.ttf") format("ttf");
    unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
        U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

2. I imported the fonts.css to my main.jsx.

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import { Provider } from "react-redux";
import App from "./App.jsx";
import theme from "@/theme";

import "./index.css";
import "./fonts.css";

import { store } from "@/store";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ChakraProvider theme={theme} cssVarsRoot="body">
      <Provider store={store}>
        <App />
      </Provider>
    </ChakraProvider>
  </React.StrictMode>
);

3. I created an extended theme and added the fonts.

import { extendTheme , theme as base} from "@chakra-ui/react";

const config = {
    initialColorMode: "light",
    useSystemColorMode: false,
};

const theme = extendTheme({
    config,
    styles: {
      global: (props) => ({
        'html, body': {
            fontFamily: `'Proxima Nova', ${base.fonts?.body}, sans-serif !important`,
        },
        'h1, h2, h3, h4, h5, h6': {
            fontFamily: `'Proxima Nova', ${base.fonts?.heading}, sans-serif !important`,
        }
    }),
    }
});

Hope this helps!