Schriftarten-Optimierung

next/font optimiert Ihre Schriftarten (einschließlich benutzerdefinierter Schriftarten) automatisch und entfernt externe Netzwerkanfragen für verbesserte Privatsphäre und Leistung.

🎥 Ansehen: Erfahren Sie mehr über die Verwendung von next/font → 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 zugrunde liegenden CSS-Eigenschaft size-adjust.

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

Google Fonts

Automatisches Self-Hosting für beliebige Google Fonts. 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 variable fonts für beste Leistung und Flexibilität.

Um die Schriftart auf allen Seiten zu verwenden, fügen Sie sie wie unten gezeigt zur _app.js-Datei unter /pages hinzu:

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

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

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

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',
})

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

Schriftart im `<head>` anwenden

Sie können die Schriftart auch ohne Wrapper und className verwenden, indem Sie sie wie folgt in den <head> einfügen:

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

Verwendung auf einer einzelnen Seite

Um die Schriftart auf einer einzelnen Seite zu verwenden, fügen Sie sie wie unten gezeigt zur spezifischen Seite hinzu:

pages/index.js

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

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

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

Angeben eines Subsets

Google Fonts werden automatisch subsetted. 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:

pages/_app.js

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. Dies stellt sicher, 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',
})

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

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

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 variable fonts für beste Leistung und Flexibilität.

pages/_app.js

import localFont from 'next/font/local'

// Schriftartdateien können innerhalb von `pages` platziert werden
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

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 zu Ihrem HTML-Dokument hinzuzufügen.

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

Fügen Sie abschließend die CSS-Variable zu 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 nun die Utility-Klassen font-sans und font-mono verwenden, um die Schriftart auf Ihre Elemente anzuwenden.

Vorabladen

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 vorab geladen, basierend auf der Art der Datei, in der sie verwendet wird:

Wenn es sich um eine einzelne Seite handelt, wird sie auf der eindeutigen Route für diese Seite vorab geladen.
Wenn sie in der benutzerdefinierten App enthalten ist, wird sie auf allen Routen der Website unter /pages vorab geladen.

Wiederverwendung von Schriftarten

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

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

On this page