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.tsim Ordnerapp/ui; - Importieren Sie die Schriftart
Poppinsaus dem Modulnext/font/google; - Geben Sie außerdem das
weightund diesubsetsder 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
Can I use multiple font weights or styles with the Poppins font?
How do I add another custom Google font to my project?
What should I do if the font doesn't appear correctly in my app?
Awesome!
Completion rate improved to 2.08Hinzufü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.tsim Ordnerapp/ui; - Importieren Sie die Schriftart
Poppinsaus dem Modulnext/font/google; - Geben Sie außerdem das
weightund diesubsetsder 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!
