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