@next/font

Custom Fonts

This feature allows you to include custom fonts in your Next.js application by specifying the font source, weight, and style.

import { createFont } from '@next/font';

const myFont = createFont({
  src: '/path/to/font.woff2',
  weight: '400',
  style: 'normal'
});

export default function MyApp() {
  return (
    <div style={{ fontFamily: myFont }}>Hello, world!</div>
  );
}

Google Fonts

This feature allows you to easily include Google Fonts in your Next.js application by specifying the font family, weights, and styles.

import { createGoogleFont } from '@next/font';

const roboto = createGoogleFont({
  family: 'Roboto',
  weights: ['400', '700'],
  styles: ['normal', 'italic']
});

export default function MyApp() {
  return (
    <div style={{ fontFamily: roboto }}>Hello, world!</div>
  );
}

Local Fonts

This feature allows you to include local fonts in your Next.js application by specifying the local path to the font file, weight, and style.

import { createLocalFont } from '@next/font';

const localFont = createLocalFont({
  src: '/local/path/to/font.woff2',
  weight: '400',
  style: 'normal'
});

export default function MyApp() {
  return (
    <div style={{ fontFamily: localFont }}>Hello, world!</div>
  );
}