@next/font

What is @next/font?

@next/font is a package designed to optimize and manage fonts in Next.js applications. It provides a streamlined way to include and configure custom fonts, Google Fonts, and local fonts, ensuring better performance and easier font management.

What are @next/font's main functionalities?

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

Other packages similar to @next/font

typeface

The 'typeface' package allows you to self-host fonts by providing a collection of pre-packaged fonts. It simplifies the process of including fonts in your project but does not offer the same level of integration with Next.js as @next/font.

webfontloader

The 'webfontloader' package is a JavaScript library for loading web fonts. It supports Google Fonts, Typekit, and custom fonts. While it is versatile, it requires more manual setup compared to the streamlined approach of @next/font.

README

@next/font

Experimental @next/font package