Verwendung von Schriftarten

Das Modul next/font optimiert Ihre Schriftarten automatisch und entfernt externe Netzwerkanfragen, um Datenschutz und Leistung zu verbessern.

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

Um next/font zu verwenden, importieren Sie es aus next/font/local oder next/font/google, rufen Sie es als Funktion mit den entsprechenden Optionen auf und setzen Sie die className des Elements, auf das Sie die Schriftart anwenden möchten. Beispiel:

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

const geist = Geist({
  subsets: ['latin'],
})

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

Schriftarten sind auf die Komponente beschränkt, in der sie verwendet werden. Um eine Schriftart auf Ihre gesamte Anwendung anzuwenden, fügen Sie sie zum Root Layout hinzu.

Google Schriftarten

Sie können jede Google-Schriftart automatisch selbst hosten. Die Schriftarten werden als statische Assets gespeichert und von derselben Domain wie Ihre Bereitstellung aus bereitgestellt, was bedeutet, dass der Browser beim Besuch Ihrer Website keine Anfragen an Google sendet.

Um eine Google-Schriftart zu verwenden, importieren Sie die gewünschte Schriftart aus next/font/google:

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

const geist = Geist({
  subsets: ['latin'],
})

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

Wir empfehlen die Verwendung von variable fonts für die beste Leistung und Flexibilität. Falls Sie jedoch 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'],
})

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

Lokale Schriftarten

Um eine lokale Schriftart zu verwenden, importieren Sie Ihre Schriftart aus next/font/local und geben Sie die src Ihrer lokalen Schriftartendatei an. Schriftarten können im public-Ordner gespeichert werden. Beispiel:

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  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',
    },
  ],
})

Font

API-Referenz für das Font-Modul

Google Schriftarten

Lokale Schriftarten

Font

On this page