How can I load fonts in Vite?

Last updated January 17, 2024

Loading local fonts

Create the following folder structure (the example with GreycliffCF custom font):

GreycliffCF/
├─ GreycliffCF-Bold.woff2
├─ GreycliffCF-Heavy.woff2
├─ GreycliffCF.css

In GreycliffCF.css file, add the following code:

@font-face {
  font-family: 'Greycliff CF';
  src: url('./GreycliffCF-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Greycliff CF';
  src: url('./GreycliffCF-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

Then import GreycliffCF.css file at the root of your application and add the font to your theme:

import { DEFAULT_THEME, MantineProvider } from '@mantine/core';

import '@mantine/core/styles.css';
import './GreycliffCF/GreycliffCF.css';

function Demo() {
  return (
    <MantineProvider
      theme={{
        fontFamily: 'Greycliff CF, sans-serif',
        fontFamilyMonospace: 'Monaco, Courier, monospace',
        headings: {
          // Use default theme if you want to provide default Mantine fonts as a fallback
          fontFamily: `Greycliff CF, ${DEFAULT_THEME.fontFamily}`,
        },
      }}
    >
      Your app here
    </MantineProvider>
  );
}

Load fonts from Google Fonts

Selects fonts you want to use at Google Fonts and copy HTML code snippet. For example, to load Roboto font, the code you receive from Google Fonts will look something like this:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
  rel="stylesheet"
/>

Add the code to the <head /> of your application index.html file of your application. The code will look something like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>Vite + Mantine App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Then add the font to your theme:

import { DEFAULT_THEME, MantineProvider } from '@mantine/core';

import '@mantine/core/styles.css';

function Demo() {
  return (
    <MantineProvider
      theme={{
        fontFamily: 'Roboto, sans-serif',
        fontFamilyMonospace: 'Monaco, Courier, monospace',
        headings: {
          // Use default theme if you want to provide default Mantine fonts as a fallback
          fontFamily: `Roboto, ${DEFAULT_THEME.fontFamily}`,
        },
      }}
    >
      Your app here
    </MantineProvider>
  );
}