Using custom fonts in a Chakra UI - React app
Tags: react, chakraui, font, ttf
Published: 2023-05-20 23:07:21

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](https://chakra-ui.com/community/recipes/using-fonts) 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](https://github.com/chakra-ui/chakra-ui/issues/7637) 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`

```scss
@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: 
```scss
src: url("./assets/Quincy-CF-Regular.woff2") format("woff2");
```

3) Create the file `theme.js`

```javascript
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
```javascript
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!