Laten we onze aandacht richten op de lettertypen die in de applicatie worden gebruikt.

De lettertypen van de applicatie worden automatisch geoptimaliseerd wanneer we de next/font-module met Next.js gebruiken. De lettertypebestanden worden tijdens het buildproces gedownload en samen met andere statische middelen gehost. Hierdoor zijn er geen extra netwerkverzoeken voor lettertypen wanneer een gebruiker je applicatie bezoekt, wat de prestaties ten goede komt.

Terug naar het project

Laten we het aangepaste Poppins Google-lettertype toevoegen aan onze applicatie.

1. Maak een nieuw bestand genaamd fonts.ts in de map app/ui;
2. Importeer het Poppins-lettertype uit de module next/font/google;
3. Geef ook het weight en de subsets van het lettertype op.

We zijn klaar om het Poppins-lettertype in de app te gebruiken. Pas het toe op het body-element in app/layout.tsx.

Hierdoor gebruikt de gehele app het Poppins-lettertype.

In het volgende hoofdstuk voegen we extra lettertypen toe.

In de praktijk