Add custom fonts to a Vite project

November 18, 2024

Loading the custom fonts

To add a custom font in your project, install the Google font you want to use from Fontsource. For this guide, we'll use the "Bricolage Grotesque" font as an example.

pnpm add @fontsource-variable/bricolage-grotesque

Next, import the font at the root of your project, referencing the css path:

main.tsx

import "@fontsource-variable/bricolage-grotesque/index.css"

Configure the custom font

Use the createSystem method to define the custom font in Chakra UI's theme configuration:

components/ui/provider.tsx

"use client"

import { createSystem, defaultConfig } from "@chakra-ui/react"

const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: "Bricolage Grotesque Variable" },
        body: { value: "Bricolage Grotesque Variable" },
      },
    },
  },
})

info

You can customize which text elements use the font by specifying it for heading, body, or both. In this case, we are setting both the body and heading fonts to "Bricolage Grotesque".

Finally, pass the system into the ChakraProvider

components/ui/provider.tsx

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

This ensures that the custom font is applied across your entire app.