Hinzufü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.
- Erstellen Sie eine neue Datei mit dem Namen
fonts.ts
im Ordnerapp/ui
; - Importieren Sie die Schriftart
Poppins
aus dem Modulnext/font/google
; - Geben Sie außerdem das
weight
und diesubsets
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
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.08
Hinzufü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.
- Erstellen Sie eine neue Datei mit dem Namen
fonts.ts
im Ordnerapp/ui
; - Importieren Sie die Schriftart
Poppins
aus dem Modulnext/font/google
; - Geben Sie außerdem das
weight
und diesubsets
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
Danke für Ihr Feedback!