Using Fonts

Fonts can be loaded into your project either by using NPM or by using the Global component from the @emotion/react package.

Please do not forget to add font-family fallbacks like e.g. sans-serif on both options.

Option 1: Install with NPM

Fontsource is an updating monorepo full of self-hostable fonts bundled into individual NPM packages. It currently supports all Google Fonts and a small subset of other custom Open Source fonts that have been manually added.

Hosting your own fonts locally within a project can lead to large performance gains as they won't experience extra (render blocking) network requests, as well as streamlining developer experiences.

For the purposes of this guide, we'll use Open Sans for the heading font and Raleway for the body font. If you have a different font you want to use, you can find the corresponding package on NPM or their website.

Install the relevant fonts you wish to install using your package manager of choice:

npm install @fontsource/open-sans @fontsource/raleway

Assign these fonts to theme.fonts to use them with Chakra. More details on theming here.

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  fonts: {
    heading: `'Open Sans', sans-serif`,
    body: `'Raleway', sans-serif`,
  },
});

export default theme;

Then import the relevant font weights and styles into the same root file you import ChakraProvider into.

import '@fontsource/raleway/400.css';
import '@fontsource/open-sans/700.css';

import {
  ChakraProvider,
  Container,
  Stack,
  Heading,
  Text,
} from '@chakra-ui/react';
import theme from './theme';

const App = () => (
  <ChakraProvider theme={theme}>
    <Container>
      <Stack>
        <Heading>The spectacle before us was indeed sublime.</Heading>
        <Text>
          Apparently we had reached a great height in the atmosphere, for the
          sky was a dead black, and the stars had ceased to twinkle. By the same
          illusion which lifts the horizon of the sea to the level of the
          spectator on a hillside, the sable cloud beneath was dished out, and
          the car seemed to float in the middle of an immense dark sphere, whose
          upper half was strewn with silver. Looking down into the dark gulf
          below, I could see a ruddy light streaming through a rift in the
          clouds.
        </Text>
      </Stack>
    </Container>
  </ChakraProvider>
);

• For Create React App, you need to set this up in index.js
• In Next.js, this can be found in _app.js
• In Gatsby, usually ChakraProvider is set up in gatsby-browser.js using wrapRootElement

Option 2: Using @font-face

Alternatively, custom fonts can be loaded in your Chakra project using the Global component from the @emotion/react package and @font-face css rules. You can then add these fonts to theme.fonts to make use of them throughout the Chakra system.

First, we'll import all our relevant font files into the public or static directory of your project, where the files will persist in location. Please note that these persisting folders can vary per bundler or framework and should be double-checked. This can later be used for the url selector for the @font-face CSS rules.

Next, we'll define a Fonts component that sets up the @font-face rules in the styles prop of Global:

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;

Assign these fonts to theme.fonts to use them with Chakra. More details on theming here.

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  fonts: {
    heading: `'Heading Font Name', sans-serif`,
    body: `'Body Font Name', sans-serif`,
  },
});

export default theme;

Then compose the rest of the project together by importing the Fonts component and theme file.

import {
  ChakraProvider,
  Container,
  Stack,
  Heading,
  Text,
} from '@chakra-ui/react';
import Fonts from './fonts';
import theme from './theme';

const App = () => (
  <ChakraProvider theme={theme}>
    <Fonts />
    <Container>
      <Stack>
        <Heading>The spectacle before us was indeed sublime.</Heading>
        <Text>
          Apparently we had reached a great height in the atmosphere, for the
          sky was a dead black, and the stars had ceased to twinkle. By the same
          illusion which lifts the horizon of the sea to the level of the
          spectator on a hillside, the sable cloud beneath was dished out, and
          the car seemed to float in the middle of an immense dark sphere, whose
          upper half was strewn with silver. Looking down into the dark gulf
          below, I could see a ruddy light streaming through a rift in the
          clouds.
        </Text>
      </Stack>
    </Container>
  </ChakraProvider>
);