DEV Community

Cover image for Using custom fonts in a Chakra UI - React app
Davide Fiorini
Davide Fiorini

Posted on • Edited on

Using custom fonts in a Chakra UI - React app

I was trying to add and use custom fonts files in my React app styled with Chakra UI, so I've been reading from its official documentation to get it.

Unfortunately, following the docs doesn't work, and the app seems not consider files imported with css @font-face rules in <Fonts /> component.

In the meantime, I opened an issue on the official GitHub repository in order to highlight this point to the project maintainers.

Anyway, after some testing, I was finally able to use custom font files inside my app (made with Create-React-App), using a alternative way to import them.
I uploaded my ttf files inside my project in a folder named assets, but obviously you can put it where you want.
If you are wondering how to do that, follow the steps I'm writing below.

However, after some tests, I was finally able to use my custom font inside the app. If you are wondering how to do that, follow the steps I'm going to write below, and in the end the project folder structure will be like:

├── src
│   ├── assets
│   │   ├── Quincy-CF-Regular.ttf
│   │   ├── Quincy-CF-Italic.ttf
│   ├── styles.css
│   ├── theme.js
│   ├── Foobar.js
Enter fullscreen mode Exit fullscreen mode

STEPS:

1) First of all upload your files inside the project. I uploaded in a folder named 'assets' (although you can put them where you want).

2) Create a file styles.css and import it in index.js

@font-face {
  font-family: "Quincy CF Regular";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("./assets/Quincy-CF-Regular.ttf") format("truetype");
  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: normal;
  font-weight: normal;
  font-display: swap;
  src: url("./assets/Quincy-CF-Italic.ttf") format("truetype");
  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;
}

Enter fullscreen mode Exit fullscreen mode

If you have woff/woff2 files, just swap the source descriptor with this one:

src: url("./assets/Quincy-CF-Regular.woff2") format("woff2");
Enter fullscreen mode Exit fullscreen mode

3) Create the file theme.js

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

const fonts = {
  myHeading: `'Quincy CF Regular', ${base.fonts?.heading}, sans-serif`,
  myBody: `'Quincy CF Light', ${base.fonts?.body}, sans-serif`,
};

const theme = extendTheme({ fonts });

export default theme;

Enter fullscreen mode Exit fullscreen mode

4) Create the component Foobar.js is going to use our fonts

import { Box, Heading, Text } from "@chakra-ui/react";

export const Foobar = () => {
  return (
    <Box>
      <Heading size="md" fontFamily="myHeading">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Heading>
      <Text fontFamily="myBody">
        Sed do eiusmod tempor incididunt ut labore et dolore.
      </Text>
    </Box>
  );
};

Enter fullscreen mode Exit fullscreen mode

That's it folks. 🙌
Let me know if this guide has been helpful to you!

Top comments (1)

Collapse
 
lucaszapico profile image
LucasZapico

Just a heads up, this is functional but it's not the preferred pattern for Chakraui. Maybe you're just trying to pump some content but checking the docs before you write is advised.

Chakraui, using fonts

import { Global } from '@emotion/react'

const Fonts = () => (
  <Global
    styles={`
      /* latin */
      @font-face {
        font-family: 'Heading Font Name';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('./fonts/headingfont.woff2') format('woff2'), url('./fonts/headingfont.woff') format('woff');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      /* latin */
      @font-face {
        font-family: 'Body Font Name';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('./fonts/bodyfont.woff2') format('woff2'), url('./fonts/bodyfont.woff') format('woff');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      `}
  />
)

export default Fonts
Enter fullscreen mode Exit fullscreen mode