Custom font doesn't work #1586

fiorins · 2023-05-08T08:40:08Z

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 · 2023-05-16T16:45:36Z

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

fiorins · 2023-05-20T23:13:49Z

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 · 2023-05-23T17:24:57Z

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 · 2023-05-23T22:50:34Z

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 · 2023-05-24T07:25:21Z

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 · 2023-07-11T21:26:38Z

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 · 2023-08-28T00:00:33Z

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 · 2023-10-08T23:39:42Z

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 · 2023-11-26T04:01:36Z

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

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

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>
);

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!

segunadebayo transferred this issue from chakra-ui/chakra-ui May 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom font doesn't work #1586

Custom font doesn't work #1586

fiorins commented May 8, 2023 •

edited

Loading

pavankpdev commented May 16, 2023

fiorins commented May 20, 2023

MadcowD commented May 23, 2023

brodwen83 commented May 23, 2023

fiorins commented May 24, 2023 •

edited

Loading

eminx commented Jul 11, 2023 •

edited

Loading

michael-gillett commented Aug 28, 2023 •

edited

Loading

bernardomoraes commented Oct 8, 2023

patrickleemsantos commented Nov 26, 2023 •

edited

Loading

Custom font doesn't work #1586

Custom font doesn't work #1586

Comments

fiorins commented May 8, 2023 • edited Loading

Description

Chakra UI Version

pavankpdev commented May 16, 2023

fiorins commented May 20, 2023

MadcowD commented May 23, 2023

brodwen83 commented May 23, 2023

fiorins commented May 24, 2023 • edited Loading

eminx commented Jul 11, 2023 • edited Loading

michael-gillett commented Aug 28, 2023 • edited Loading

bernardomoraes commented Oct 8, 2023

patrickleemsantos commented Nov 26, 2023 • edited Loading

fiorins commented May 8, 2023 •

edited

Loading

fiorins commented May 24, 2023 •

edited

Loading

eminx commented Jul 11, 2023 •

edited

Loading

michael-gillett commented Aug 28, 2023 •

edited

Loading

patrickleemsantos commented Nov 26, 2023 •

edited

Loading