Summary  
This chapter explains how to import and configure a custom Google Font using a font-module API—specifying weights and subsets—and have it automatically optimized and bundled at build time. It then shows applying the generated font class to the root layout so the font is used across the entire application.

General domain of usage  
Web development (frontend styling)

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.

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

Implementierung der Authentifizierung in Next.js.

Benutzerdefinierte Google-Schriftarten

Zurück zum Projekt

In der Praxis

Awesome!

Benutzerdefinierte Google-Schriftarten

Zurück zum Projekt

In der Praxis