Font-Modul

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

Es beinhaltet integriertes automatisches Self-Hosting für jede Schriftdatei. Das bedeutet, Sie können Webfonts optimal laden, ohne Layoutverschiebungen zu verursachen.

Sie können auch bequem alle Google Fonts nutzen. CSS- und Schriftdateien werden zum Build-Zeitpunkt heruntergeladen und mit den restlichen statischen Assets selbst gehostet. Es werden keine Anfragen an Google vom Browser gesendet.

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

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

// Beim Laden einer variablen Schrift 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>
  )
}

🎥 Video: Erfahren Sie mehr über die Verwendung von next/font → YouTube (6 Minuten).

Referenz

src

Der Pfad der Schriftdatei als String oder ein Array von Objekten (mit dem Typ Array<{path: string, weight?: string, style?: string}>) relativ zum Verzeichnis, in dem die Schriftlader-Funktion aufgerufen wird.

Verwendet in next/font/local

• Erforderlich

Beispiele:

• src:'./fonts/my-font.woff2' wobei my-font.woff2 in einem Verzeichnis namens fonts innerhalb des app-Verzeichnisses platziert ist
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• Wenn die Schriftlader-Funktion in app/page.tsx mit src:'../styles/fonts/my-font.ttf' aufgerufen wird, dann ist my-font.ttf im styles/fonts-Verzeichnis im Stammverzeichnis des Projekts platziert

weight

Das Schrift-gewicht mit folgenden Möglichkeiten:

• Ein String mit möglichen Werten der für die spezifische Schrift verfügbaren Gewichte oder ein Wertebereich, wenn es sich um eine variable Schrift handelt
• Ein Array von Gewichtswerten, wenn die Schrift keine variable Google-Schrift ist. Gilt nur für next/font/google.

Verwendet in next/font/google und next/font/local

• Erforderlich, wenn die verwendete Schrift nicht variabel ist

Beispiele:

• weight: '400': Ein String für einen einzelnen Gewichtswert - für die Schrift Inter sind die möglichen Werte '100', '200', '300', '400', '500', '600', '700', '800', '900' oder 'variable', wobei 'variable' der Standard ist
• weight: '100 900': Ein String für den Bereich zwischen 100 und 900 für eine variable Schrift
• weight: ['100','400','900']: Ein Array mit 3 möglichen Werten für eine nicht-variable Schrift

style

Der Schrift-stil mit folgenden Möglichkeiten:

• Ein String-Wert mit dem Standardwert 'normal'
• Ein Array von Stilwerten, wenn die Schrift keine variable Google-Schrift ist. Gilt nur für next/font/google.

Verwendet in next/font/google und next/font/local

• Optional

Beispiele:

• style: 'italic': Ein String - kann normal oder italic für next/font/google sein
• style: 'oblique': Ein String - kann jeden Wert für next/font/local annehmen, wird aber von standardmäßigen Schriftstilen erwartet
• style: ['italic','normal']: Ein Array mit 2 Werten für next/font/google - die Werte sind normal und italic

subsets

Die Schrift-subsets, definiert durch ein Array von String-Werten mit den Namen der Subsets, die Sie vorladen möchten. Schriften, die über subsets angegeben werden, erhalten einen Link-Preload-Tag im Head, wenn die preload-Option aktiviert ist, was der Standard ist.

Verwendet in next/font/google

• Optional

Beispiele:

• subsets: ['latin']: Ein Array mit dem Subset latin

Eine Liste aller Subsets finden Sie auf der Google Fonts-Seite für Ihre Schrift.

axes

Einige variable Schriften haben zusätzliche axes, die eingeschlossen werden können. Standardmäßig wird nur das Schriftgewicht eingeschlossen, um die Dateigröße gering zu halten. Die möglichen Werte von axes hängen von der spezifischen Schrift ab.

Verwendet in next/font/google

• Optional

Beispiele:

• axes: ['slnt']: Ein Array mit dem Wert slnt für die variable Schrift Inter, die slnt als zusätzliche axes hat, wie hier gezeigt. Die möglichen axes-Werte für Ihre Schrift finden Sie, indem Sie den Filter auf der Google-Variable-Fonts-Seite verwenden und nach Achsen außer wght suchen

display

Die Schrift-display mit möglichen String-Werten von 'auto', 'block', 'swap', 'fallback' oder 'optional' mit dem Standardwert 'swap'.

Verwendet in next/font/google und next/font/local

• Optional

Beispiele:

• display: 'optional': Ein String, der dem Wert optional zugewiesen ist

preload

Ein boolescher Wert, der angibt, ob die Schrift vor geladen werden soll oder nicht. Der Standardwert ist true.

Verwendet in next/font/google und next/font/local

• Optional

Beispiele:

• preload: false

fallback

Die Fallback-Schrift, die verwendet wird, wenn die Schrift nicht geladen werden kann. Ein Array von Strings mit Fallback-Schriften ohne Standardwert.

• Optional

Verwendet in next/font/google und next/font/local

Beispiele:

• fallback: ['system-ui', 'arial']: Ein Array, das die Fallback-Schriften auf system-ui oder arial setzt

adjustFontFallback

• Für next/font/google: Ein boolescher Wert, der festlegt, ob eine automatische Fallback-Schrift verwendet werden soll, um Cumulative Layout Shift zu reduzieren. Der Standardwert ist true.
• Für next/font/local: Ein String oder boolescher false-Wert, der festlegt, ob eine automatische Fallback-Schrift verwendet werden soll, um Cumulative Layout Shift zu reduzieren. Die möglichen Werte sind 'Arial', 'Times New Roman' oder false. Der Standardwert ist 'Arial'.

Verwendet in next/font/google und next/font/local

• Optional

Beispiele:

• adjustFontFallback: false: für next/font/google
• adjustFontFallback: 'Times New Roman': für next/font/local

variable

Ein String-Wert, der den CSS-Variablennamen definiert, der verwendet werden soll, wenn der Stil mit der CSS-Variablen-Methode angewendet wird.

Verwendet in next/font/google und next/font/local

• Optional

Beispiele:

• variable: '--my-font': Die CSS-Variable --my-font wird deklariert

declarations

Ein Array von Schrift-Deskriptor-Schlüssel-Wert-Paaren, die das generierte @font-face weiter definieren.

Verwendet in next/font/local

• Optional

Beispiele:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

Beispiele

Google Fonts

Um eine Google-Schrift zu verwenden, importieren Sie sie als Funktion aus next/font/google. Wir empfehlen die Verwendung von variablen Schriften für die beste Leistung und Flexibilität.

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

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

// Beim Laden einer variablen Schrift 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 Schrift verwenden können, müssen Sie ein Gewicht angeben:

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:

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

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

Schrift im <head> anwenden

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

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 Schrift auf einer einzelnen Seite zu verwenden, fügen Sie sie wie unten gezeigt zur spezifischen Seite hinzu:

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 subsetiert. Dies reduziert die Größe der Schriftdatei und verbessert die Leistung. Sie müssen definieren, welche dieser Subsets Sie vorladen möchten. Wenn Sie keine Subsets angeben, während preload true ist, wird eine Warnung ausgegeben.

Dies kann durch Hinzufügen zum Funktionsaufruf erfolgen:

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

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:

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 die beste Leistung und Flexibilität.

import localFont from 'next/font/local'

// Schriftdateien 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 integriert sich nahtlos mit Tailwind CSS über CSS-Variablen.

Im folgenden Beispiel verwenden wir die Schriftarten Inter und Roboto_Mono von next/font/google (Sie können jede Google Font oder lokale Schriftart verwenden). Verwenden Sie die Option variable, um einen CSS-Variablennamen zu definieren, z.B. inter und roboto_mono für diese Schriftarten. Wenden Sie dann inter.variable und roboto_mono.variable an, um die CSS-Variablen in Ihr HTML-Dokument einzubinden.

Gut zu wissen: Sie können diese Variablen dem <html>- oder <body>-Tag hinzufügen, je nach Präferenz, Stilanforderungen oder Projektanforderungen.

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

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

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

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

Fügen Sie schließlich die CSS-Variable zu Ihrer Tailwind CSS-Konfiguration hinzu:

Tailwind CSS v4

Ab Tailwind v4 ist standardmäßig keine Konfiguration erforderlich. Falls Sie dennoch eine Konfiguration benötigen, können Sie der offiziellen Dokumentation für die Konfiguration der globalen CSS-Datei folgen.

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

/** @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.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

Anwendung von Stilen

Sie können die Schriftstile auf drei Arten anwenden:

• className
• style
• CSS-Variablen

className

Gibt eine schreibgeschützte CSS-className für die geladene Schriftart zurück, die an ein HTML-Element übergeben werden kann.

<p className={inter.className}>Hallo, Next.js!</p>

style

Gibt ein schreibgeschütztes CSS-style-Objekt für die geladene Schriftart zurück, das an ein HTML-Element übergeben werden kann, einschließlich style.fontFamily für den Zugriff auf den Schriftartnamen und Fallback-Schriftarten.

<p style={inter.style}>Hallo Welt</p>

CSS-Variablen

Wenn Sie Ihre Stile in einem externen Stylesheet festlegen und dort zusätzliche Optionen angeben möchten, verwenden Sie die CSS-Variablen-Methode.

Importieren Sie zusätzlich zur Schriftart auch die CSS-Datei, in der die CSS-Variable definiert ist, und setzen Sie die Variable-Option des Schriftladers wie folgt:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

Um die Schriftart zu verwenden, setzen Sie die className des übergeordneten Containers des zu formatierenden Texts auf den variable-Wert des Schriftladers und die className des Texts auf die styles-Eigenschaft aus der externen CSS-Datei.

<main className={inter.variable}>
  <p className={styles.text}>Hallo Welt</p>
</main>

Definieren Sie die text-Selector-Klasse in der component.module.css-CSS-Datei wie folgt:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

Im obigen Beispiel wird der Text Hallo Welt mit der Schriftart Inter und der generierten Fallback-Schriftart mit font-weight: 200 und font-style: italic formatiert.

Verwendung einer Schriftart-Definitionsdatei

Jedes Mal, wenn Sie die localFont- oder Google Font-Funktion aufrufen, wird diese Schriftart als eine Instanz in Ihrer Anwendung gehostet. Wenn Sie dieselbe Schriftart an mehreren Stellen verwenden müssen, sollten Sie sie daher an einer Stelle laden und das zugehörige Schriftart-Objekt dort importieren, wo Sie es benötigen. Dies geschieht über eine Schriftart-Definitionsdatei.

Erstellen Sie beispielsweise eine fonts.ts-Datei in einem styles-Ordner im Stammverzeichnis Ihres App-Verzeichnisses.

Geben Sie dann Ihre Schriftart-Definitionen wie folgt an:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// definieren Sie Ihre variablen Schriftarten
const inter = Inter()
const lora = Lora()
// definieren Sie 2 Gewichte einer nicht-variablen Schriftart
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// definieren Sie eine benutzerdefinierte lokale Schriftart, wobei GreatVibes-Regular.ttf im styles-Ordner gespeichert ist
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

Sie können diese Definitionen nun wie folgt in Ihrem Code verwenden:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hallo Welt mit Inter-Schriftart</p>
      <p style={lora.style}>Hallo Welt mit Lora-Schriftart</p>
      <p className={sourceCodePro700.className}>
        Hallo Welt mit Source_Sans_3-Schriftart und Gewicht 700
      </p>
      <p className={greatVibes.className}>Mein Titel in Great Vibes-Schriftart</p>
    </div>
  )
}

Um den Zugriff auf die Schriftart-Definitionen in Ihrem Code zu erleichtern, können Sie einen Pfad-Alias in Ihren tsconfig.json- oder jsconfig.json-Dateien wie folgt definieren:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

Sie können jetzt jede Schriftart-Definition wie folgt importieren:

import { greatVibes, sourceCodePro400 } from '@/fonts'

Vorabladung

Wenn eine Schriftart-Funktion 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 dem Dateityp, in dem sie verwendet wird, vorab geladen:

• Wenn es sich um eine eindeutige 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.

Versionsänderungen