Font-Modul

Diese API-Referenz hilft Ihnen zu verstehen, wie Sie next/font/google und next/font/local verwenden können. Informationen zu Funktionen und Verwendung finden Sie auf der Seite Optimierung von Fonts.

Argumente der Font-Funktion

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

src

Der Pfad der Font-Datei als String oder ein Array von Objekten (mit dem Typ Array<{path: string, weight?: string, style?: string}>) relativ zu dem Verzeichnis, in dem die Font-Loader-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 Font-Loader-Funktion in app/page.tsx mit src:'../styles/fonts/my-font.ttf' aufgerufen wird, dann liegt my-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.

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

• Erforderlich, wenn der verwendete Font kein variabler Font 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 Standardwert 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 Stilwerten, wenn der Font kein variabler Google Font 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 für next/font/local jeden Wert annehmen, wird aber von standardmäßigen Font-Stilen 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 vorladen möchten. Fonts, 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 Ihren Font.

axes

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

Verwendet in next/font/google

• 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-Seite 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'.

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 der Font vorabgeladen werden soll oder nicht. Der Standardwert ist true.

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

• 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

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

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 (CLS) zu reduzieren. Der Standardwert 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 (CLS) 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, um den Namen der CSS-Variable zu definieren, die 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 Font-Face-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%' }]

Anwendung von Stilen

Sie können die Font-Stile 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 wird.

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

style

Gibt ein schreibgeschütztes CSS-style-Objekt für den geladenen Font zurück, das an ein HTML-Element übergeben wird, einschließlich style.fontFamily, um auf den Font-Namen und Fallback-Fonts zuzugreifen.

<p style={inter.style}>Hello World</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.

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 gestalten 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}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</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 Hello World mit dem Inter-Font und dem generierten Font-Fallback mit font-weight: 200 und font-style: italic gestaltet.

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 entsprechende 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, wobei 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, 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}>Hello world mit Inter-Font</p>
      <p style={lora.style}>Hello world mit Lora-Font</p>
      <p className={sourceCodePro700.className}>
        Hello world 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}>Hello world mit Inter-Font</p>
      <p style={lora.style}>Hello world mit Lora-Font</p>
      <p className={sourceCodePro700.className}>
        Hello world 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