Font-Optimierung

next/font optimiert Ihre Schriftarten (einschließlich benutzerdefinierter Schriftarten) automatisch und entfernt externe Netzwerkanfragen für verbesserten Datenschutz und bessere Leistung.

🎥 Video: Mehr über die Verwendung von next/font erfahren → YouTube (6 Minuten).

next/font beinhaltet integriertes automatisches Self-Hosting für beliebige Schriftartdateien. Das bedeutet, Sie können Webfonts optimal laden, ohne Layoutverschiebungen, dank der zugrundeliegenden CSS-Eigenschaft size-adjust.

Dieses neue Schriftart-System ermöglicht es Ihnen auch, bequem alle Google Fonts mit Fokus auf Leistung und Datenschutz zu nutzen. CSS- und Schriftartdateien werden zum Build-Zeitpunkt heruntergeladen und mit den restlichen statischen Assets gehostet. Es werden keine Anfragen an Google vom Browser gesendet.

Google Fonts

Hosten Sie beliebige Google Fonts automatisch selbst. Die Schriftarten sind im Deployment enthalten und werden von der gleichen Domain wie Ihr Deployment bereitgestellt. Es werden keine Anfragen an Google vom Browser gesendet.

Beginnen Sie, indem Sie die gewünschte Schriftart aus next/font/google als Funktion importieren. Wir empfehlen die Verwendung von variablen Schriftarten für beste Leistung und Flexibilität.

import { Inter } from 'next/font/google'

// Bei Verwendung einer variablen Schriftart müssen Sie das Schriftgewicht nicht angeben
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

import { Inter } from 'next/font/google'

// Bei Verwendung einer variablen Schriftart müssen Sie das Schriftgewicht nicht angeben
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Wenn Sie keine variable Schriftart verwenden können, müssen Sie ein Gewicht angeben:

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

Sie können mehrere Gewichte und/oder Stile angeben, indem Sie ein Array verwenden:

app/layout.js

const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Wichtig: Verwenden Sie einen Unterstrich (_) für Schriftartnamen mit mehreren Wörtern. Z.B. sollte Roboto Mono als Roboto_Mono importiert werden.

Angeben eines Subsets

Google Fonts werden automatisch subsetiert. Dies reduziert die Größe der Schriftartdatei und verbessert die Leistung. Sie müssen definieren, welche dieser Subsets Sie vorladen möchten. Wenn Sie keine Subsets angeben, während preload auf true gesetzt ist, wird eine Warnung ausgegeben.

Dies kann durch Hinzufügen zum Funktionsaufruf erfolgen:

const inter = Inter({ subsets: ['latin'] })

const inter = Inter({ subsets: ['latin'] })

Weitere Informationen finden Sie in der Font-API-Referenz.

Verwendung mehrerer Schriftarten

Sie können mehrere Schriftarten in Ihrer Anwendung importieren und verwenden. Es gibt zwei Ansätze, die Sie verfolgen können.

Der erste Ansatz besteht darin, eine Utility-Funktion zu erstellen, die eine Schriftart exportiert, importiert und deren className dort anwendet, wo sie benötigt wird. Dadurch wird sichergestellt, dass die Schriftart nur vorab geladen wird, wenn sie gerendert wird:

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { inter } from './fonts'

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

Im obigen Beispiel wird Inter global angewendet, und Roboto Mono kann nach Bedarf importiert und angewendet werden.

Alternativ können Sie eine CSS-Variable erstellen und mit Ihrer bevorzugten CSS-Lösung verwenden:

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

app/global.css

html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

Im obigen Beispiel wird Inter global angewendet, und alle <h1>-Tags werden mit Roboto Mono formatiert.

Empfehlung: Verwenden Sie mehrere Schriftarten sparsam, da jede neue Schriftart eine zusätzliche Ressource ist, die der Client herunterladen muss.

Lokale Schriftarten

Importieren Sie next/font/local und geben Sie das src Ihrer lokalen Schriftartdatei an. Wir empfehlen die Verwendung von variablen Schriftarten für beste Leistung und Flexibilität.

import localFont from 'next/font/local'

// Schriftdateien können innerhalb von `app` platziert werden
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

import localFont from 'next/font/local'

// Schriftdateien können innerhalb von `app` platziert werden
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

Wenn Sie mehrere Dateien für eine einzelne Schriftfamilie verwenden möchten, kann src ein Array sein:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

Weitere Informationen finden Sie in der Font-API-Referenz.

Mit Tailwind CSS

next/font kann mit Tailwind CSS über eine CSS-Variable verwendet werden.

Im folgenden Beispiel verwenden wir die Schriftart Inter aus next/font/google (Sie können jede Schriftart von Google oder lokale Schriftarten verwenden). Laden Sie Ihre Schriftart mit der variable-Option, um Ihren CSS-Variablennamen zu definieren, und weisen Sie sie inter zu. Verwenden Sie dann inter.variable, um die CSS-Variable Ihrem HTML-Dokument hinzuzufügen.

import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Fügen Sie abschließend die CSS-Variable Ihrer Tailwind CSS-Konfiguration hinzu:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

Sie können jetzt die Utility-Klassen font-sans und font-mono verwenden, um die Schriftart auf Ihre Elemente anzuwenden.

Vorabladung

Wenn eine Schriftartfunktion auf einer Seite Ihrer Website aufgerufen wird, ist sie nicht global verfügbar und wird nicht auf allen Routen vorab geladen. Stattdessen wird die Schriftart nur auf den relevanten Routen basierend auf der Art der Datei, in der sie verwendet wird, vorab geladen:

Wenn es sich um eine einzelne Seite handelt, wird sie auf der eindeutigen Route für diese Seite vorab geladen.
Wenn es sich um ein Layout handelt, wird sie auf allen Routen vorab geladen, die von dem Layout umschlossen werden.
Wenn es sich um das Root-Layout handelt, wird sie auf allen Routen vorab geladen.

Wiederverwendung von Schriftarten

Jedes Mal, wenn Sie die localFont- oder Google Font-Funktion aufrufen, wird diese Schriftart als eine Instanz in Ihrer Anwendung gehostet. Wenn Sie dieselbe Font-Funktion in mehreren Dateien laden, werden daher mehrere Instanzen derselben Schriftart gehostet. In dieser Situation wird Folgendes empfohlen:

Rufen Sie die Font-Loader-Funktion in einer gemeinsam genutzten Datei auf
Exportieren Sie sie als Konstante
Importieren Sie die Konstante in jede Datei, in der Sie diese Schriftart verwenden möchten

Font

Optimierung des Ladens von Webfonts mit den integrierten `next/font`-Loadern.