How can I load fonts in Next.js?

Last updated January 4, 2024

Loading fonts with next/font package

To load fonts with the next/font package, create the following folder structure (the example with GreycliffCF custom font):

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

In GreycliffCF.ts file, add the following code:

import localFont from 'next/font/local';

export const greycliffCF = localFont({
  src: [
    {
      path: './GreycliffCF-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './GreycliffCF-Heavy.woff2',
      weight: '900',
      style: 'normal',
    },
  ],
});

Then add the font to your theme:

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

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

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

Loading fonts without next/font package

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 and 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>
  );
}

Alternatively, you can download fonts from Google Fonts and load them with next/font package to have Next.js fonts optimization feature.