dev-resources.site

for different kinds of informations.

Using custom fonts in a Chakra UI - React app

Published at

5/20/2023

Categories

4 categories in total

Author

7 person written this

fiorins

open

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

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

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

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

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;

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

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

font Article's

30 articles in total