Schriftart-Optimierung

next/font optimiert Ihre Schriftarten automatisch (einschließlich benutzerdefinierter Schriftarten) 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 bietet eine integrierte automatische Selbst-Hosting für jede Schriftartdatei. Das bedeutet, Sie können Webschriftarten optimal laden ohne Layout-Verschiebung, dank der zugrunde liegenden CSS-Eigenschaft size-adjust.

Dieses neue Schriftsystem ermöglicht es Ihnen auch, alle Google-Schriftarten mit Leistung und Datenschutz im Hinterkopf bequem zu nutzen. CSS- und Schriftartdateien werden zur Bauzeit heruntergeladen und mit den restlichen statischen Assets selbst gehostet. Es werden keine Anfragen vom Browser an Google gesendet.

Google-Schriftarten

Hosten Sie eine beliebige Google-Schriftart automatisch selbst. Schriftarten sind in der Bereitstellung enthalten und werden von derselben Domäne wie Ihre Bereitstellung serviert. Es werden keine Anfragen vom Browser an Google gesendet.

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

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

pages/_app.js

import { Inter } from 'next/font/google'
 
// Wenn eine variable Schriftart geladen wird, 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',
})

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

Schriftart in `<head>` anwenden

Sie können die Schriftart auch ohne Wrapper und className verwenden, indem Sie sie wie folgt in <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 folgt 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>Hallo Welt</p>
    </div>
  )
}

Subset angeben

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

Dies kann durch Hinzufügen beim Funktionsaufruf erfolgen:

pages/_app.js

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

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

Mehrere Schriftarten verwenden

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 Hilfsfunktion zu erstellen, die eine Schriftart exportiert, importiert und deren className bei Bedarf anwendet. Dies stellt sicher, dass die Schriftart nur beim Rendern vorgeladen wird:

app/fonts.ts

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

app/fonts.js

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

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

In diesem Beispiel wird Inter global angewendet, und alle <h1>-Tags werden mit Roboto Mono gestaltet.

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

Lokale Schriftarten

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

pages/_app.js

import localFont from 'next/font/local'
 
// Schriftartendateien können innerhalb von `pages` abgelegt 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 Schriftarten-API-Referenz.

Mit Tailwind CSS

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

In diesem Beispiel verwenden wir die Schriftart Inter aus next/font/google (Sie können eine beliebige Schriftart von Google Fonts oder lokalen Schriftarten verwenden). Laden Sie Ihre Schriftart mit der Option variable, um den Namen Ihrer CSS-Variable 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 die CSS-Variable abschließend zur 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.

Vorabladen

Wenn eine Schriftartenfunktion auf einer Seite Ihrer Website aufgerufen wird, ist sie nicht global verfügbar und wird nicht auf allen Routen vorgeladen. Stattdessen wird die Schriftart nur auf den zugehörigen Routen vorgeladen, basierend auf der Art der Datei, in der sie verwendet wird:

Wenn es sich um eine eindeutige Seite handelt, wird sie auf der eindeutigen Route für diese Seite vorgeladen
Wenn sie sich in der benutzerdefinierten App befindet, wird sie auf allen Routen der Website unter /pages vorgeladen

Schriftarten wiederverwenden

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

Rufen Sie die Schriftartladungsfunktion in einer gemeinsam genutzten Datei auf
Exportieren Sie sie als Konstante
Importieren Sie die Konstante in jeder Datei, in der Sie diese Schriftart verwenden möchten