Font-Modul

Diese API-Referenz hilft Ihnen zu verstehen, wie Sie next/font/google und next/font/local verwenden können. Für Funktionen und Anwendungsbeispiele lesen Sie bitte die Seite Optimierung von Fonts.

Argumente der Font-Funktion

Für die Verwendung siehe Google Fonts und Lokale Fonts.

src

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

Wird in next/font/local verwendet

• Erforderlich

Beispiele:

• src:'./fonts/mein-font.woff2' wobei mein-font.woff2 in einem Verzeichnis namens fonts innerhalb des app-Verzeichnisses liegt
• 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 Font-Loader-Funktion in app/page.tsx mit src:'../styles/fonts/mein-font.ttf' aufgerufen wird, dann liegt mein-font.ttf in styles/fonts im Stammverzeichnis des Projekts

weight

Das Font-weight mit folgenden Möglichkeiten:

• Ein String mit möglichen Werten der für den spezifischen Font verfügbaren Gewichte oder ein Wertebereich, wenn es sich um einen variablen Font handelt
• Ein Array von Gewichtswerten, wenn der Font kein variabler Google Font ist. Gilt nur für next/font/google.

Wird in next/font/google und next/font/local verwendet

• Erforderlich, wenn der verwendete Font nicht variabel ist

Beispiele:

• weight: '400': Ein String für einen einzelnen Gewichtswert - für den Font 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 einen variablen Font
• weight: ['100','400','900']: Ein Array mit 3 möglichen Werten für einen nicht-variablen Font

style

Das Font-style mit folgenden Möglichkeiten:

• Ein String-Wert mit dem Standardwert 'normal'
• Ein Array von Style-Werten, wenn der Font kein variabler Google Font ist. Gilt nur für next/font/google.

Wird in next/font/google und next/font/local verwendet

• Optional

Beispiele:

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

subsets

Die Font-subsets, definiert durch ein Array von String-Werten mit den Namen der einzelnen Subsets, die Sie preloaden möchten. Fonts, die über subsets angegeben werden, erhalten einen Link-Preload-Tag im Head, wenn die preload-Option aktiviert ist (Standard).

Wird in next/font/google verwendet

• Optional

Beispiele:

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

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

axes

Einige variable Fonts haben zusätzliche axes, die eingeschlossen werden können. Standardmäßig ist nur das Font-Gewicht enthalten, um die Dateigröße gering zu halten. Die möglichen Werte von axes hängen vom spezifischen Font ab.

Wird in next/font/google verwendet

• Optional

Beispiele:

• axes: ['slnt']: Ein Array mit dem Wert slnt für den variablen Font Inter, der slnt als zusätzliche axes hat, wie hier gezeigt. Die möglichen axes-Werte für Ihren Font finden Sie, indem Sie den Filter auf der Google variable fonts page verwenden und nach anderen Achsen als wght suchen

display

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

Wird in next/font/google und next/font/local verwendet

• Optional

Beispiele:

• display: 'optional': Ein String mit dem Wert optional

preload

Ein boolescher Wert, der angibt, ob der Font preloaded werden soll oder nicht. Standard ist true.

Wird in next/font/google und next/font/local verwendet

• Optional

Beispiele:

• preload: false

fallback

Der Fallback-Font, der verwendet wird, wenn der Font nicht geladen werden kann. Ein Array von Strings mit Fallback-Fonts ohne Standardwert.

• Optional

Wird in next/font/google und next/font/local verwendet

Beispiele:

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

adjustFontFallback

• Für next/font/google: Ein boolescher Wert, der festlegt, ob ein automatischer Fallback-Font verwendet werden soll, um Cumulative Layout Shift zu reduzieren. Standard ist true.
• Für next/font/local: Ein String oder boolescher Wert false, der festlegt, ob ein automatischer Fallback-Font verwendet werden soll, um Cumulative Layout Shift zu reduzieren. Mögliche Werte sind 'Arial', 'Times New Roman' oder false. Standard ist 'Arial'.

Wird in next/font/google und next/font/local verwendet

• Optional

Beispiele:

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

variable

Ein String-Wert, um den Namen der CSS-Variable zu definieren, die verwendet werden soll, wenn der Style mit der CSS-Variablen-Methode angewendet wird.

Wird in next/font/google und next/font/local verwendet

• Optional

Beispiele:

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

declarations

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

Wird in next/font/local verwendet

• Optional

Beispiele:

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

Anwendung von Styles

Sie können die Font-Styles auf drei Arten anwenden:

• className
• style
• CSS-Variablen

className

Gibt eine schreibgeschützte CSS-className für den geladenen Font 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 den geladenen Font zurück, das an ein HTML-Element übergeben werden kann, einschließlich style.fontFamily, um auf den Font-Namen und Fallback-Fonts zuzugreifen.

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

CSS-Variablen

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

Zusätzlich zum Importieren des Fonts importieren Sie auch die CSS-Datei, in der die CSS-Variable definiert ist, und setzen die Variable-Option des Font-Loader-Objekts wie folgt:

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

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

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

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

Um den Font zu verwenden, setzen Sie die className des übergeordneten Containers des Textes, den Sie stylen möchten, auf den variable-Wert des Font-Loaders und die className des Textes auf die styles-Eigenschaft aus der externen CSS-Datei.

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

<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 dem Inter-Font und dem generierten Font-Fallback mit font-weight: 200 und font-style: italic gestylt.

Verwendung einer Font-Definitionsdatei

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

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

Dann geben Sie Ihre Font-Definitionen wie folgt an:

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

// Definieren Sie Ihre variablen Fonts
const inter = Inter()
const lora = Lora()
// Definieren Sie 2 Gewichte eines nicht-variablen Fonts
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// Definieren Sie einen benutzerdefinierten lokalen Font, wo GreatVibes-Regular.ttf im styles-Ordner gespeichert ist
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

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

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

// Definieren Sie Ihre variablen Fonts
const inter = Inter()
const lora = Lora()
// Definieren Sie 2 Gewichte eines nicht-variablen Fonts
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// Definieren Sie einen benutzerdefinierten lokalen Font, wo 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-Font</p>
      <p style={lora.style}>Hallo Welt mit Lora-Font</p>
      <p className={sourceCodePro700.className}>
        Hallo Welt mit Source_Sans_3-Font und Gewicht 700
      </p>
      <p className={greatVibes.className}>Mein Titel in Great Vibes-Font</p>
    </div>
  )
}

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

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

Um den Zugriff auf die Font-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 nun jede Font-Definition wie folgt importieren:

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

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

Versionsänderungen