Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Hinzufügen Benutzerdefinierter Google Fonts | Einrichtung Eines Next.js-Projekts
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookHinzufügen Benutzerdefinierter Google Fonts

Richten wir nun unser Augenmerk auf die in der App verwendeten Schriftarten.

Die Schriftarten der Anwendung werden automatisch optimiert, wenn das Modul next/font mit Next.js verwendet wird. Die Schriftdateien werden zur Build-Zeit heruntergeladen und zusammen mit den anderen statischen Assets bereitgestellt. Dadurch entstehen beim Besuch der Anwendung keine zusätzlichen Netzwerk-Anfragen für Schriftarten, was die Performance verbessert.

Zurück zum Projekt

Fügen wir die benutzerdefinierte Google-Schriftart Poppins für unsere App hinzu.

  1. Erstellen Sie eine neue Datei mit dem Namen fonts.ts im Ordner app/ui;
  2. Importieren Sie die Schriftart Poppins aus dem Modul next/font/google;
  3. Geben Sie außerdem das weight und die subsets der Schriftart an.

Die Poppins-Schriftart ist nun bereit zur Verwendung in der App. Diese wird auf das body-Element in der Datei app/layout.tsx angewendet.

Dadurch verwendet die gesamte App die Poppins-Schriftart.

Im nächsten Kapitel werden zusätzliche Schriftarten eingebunden.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.08

bookHinzufügen Benutzerdefinierter Google Fonts

Swipe um das Menü anzuzeigen

Richten wir nun unser Augenmerk auf die in der App verwendeten Schriftarten.

Die Schriftarten der Anwendung werden automatisch optimiert, wenn das Modul next/font mit Next.js verwendet wird. Die Schriftdateien werden zur Build-Zeit heruntergeladen und zusammen mit den anderen statischen Assets bereitgestellt. Dadurch entstehen beim Besuch der Anwendung keine zusätzlichen Netzwerk-Anfragen für Schriftarten, was die Performance verbessert.

Zurück zum Projekt

Fügen wir die benutzerdefinierte Google-Schriftart Poppins für unsere App hinzu.

  1. Erstellen Sie eine neue Datei mit dem Namen fonts.ts im Ordner app/ui;
  2. Importieren Sie die Schriftart Poppins aus dem Modul next/font/google;
  3. Geben Sie außerdem das weight und die subsets der Schriftart an.

Die Poppins-Schriftart ist nun bereit zur Verwendung in der App. Diese wird auf das body-Element in der Datei app/layout.tsx angewendet.

Dadurch verwendet die gesamte App die Poppins-Schriftart.

Im nächsten Kapitel werden zusätzliche Schriftarten eingebunden.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8
some-alt