Import a custom font

Problem

You need to use a specific custom font in your application (e.g. from Google Fonts).

Solution

1. Find the <link /> tag you need to include on your page for your custom font
2. Using the Command Bar, browse to Custom and drag out a React component
3. Replace the component source with the following:

return function CustomFont() {
  // replace with your <link /> tag's href
  const href = "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  return (
    <link href={href} rel="stylesheet" />
  )
}

1. Go to the Themes tab, create a new Theme with the + button
2. Add the following snippet to your Theme:

return {
  fonts: {
    body: 'Roboto, sans-serif',
  },
  // ... existing theme
}

1. Click Activate Theme on the bottom right

Discussion

• Themes are a powerful way to customize the look-and-feel of your app in one place. You can expose other font families from here, add colors, and change the default CSS of components. Refer to the Chakra documentation (opens in a new tab) for more information on how to configure themes.

See also

• Add custom CSS to a UI component