Benutzerdefinierte Google-Schriftarten

Richten wir unsere Aufmerksamkeit auf die in der App zu verwendenden Schriftarten.

Die Schriftarten der Anwendung werden automatisch optimiert, wenn wir das next/font Modul mit Next.js verwenden. Die Schriftdateien werden zur Build-Zeit heruntergeladen und zusammen mit Ihren anderen statischen Assets gehostet. Dadurch gibt es keine zusätzlichen Netzwerk-Anfragen für Schriftarten, wenn ein Benutzer Ihre Anwendung besucht, was die Leistung verbessert.

Zurück zum Projekt

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

1. Erstellen Sie eine neue Datei namens fonts.ts im Ordner app/ui;
2. Importieren Sie die Poppins Schriftart aus dem next/font/google Modul;
3. Wir sollten auch das weight und die subsets der Schriftart angeben.

Wir sind bereit, die Poppins-Schriftart in der App zu verwenden. Lassen Sie uns diese auf das body-Element in der app/layout.tsx anwenden.

Als Ergebnis verwendet die gesamte App die Poppins-Schriftart.

Im nächsten Kapitel fügen wir zusätzliche Schriftarten hinzu.

In der Praxis