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)

Lad os rette opmærksomheden mod de skrifttyper, der skal bruges i appen.

Applikationens skrifttyper optimeres automatisk, når vi bruger `next/font`-modulet med Next.js. Skrifttypefilerne downloades under build-processen og hostes sammen med dine andre statiske aktiver. Som resultat heraf er der ingen ekstra netværksanmodninger om skrifttyper, når en bruger besøger din applikation, hvilket hjælper med at forbedre ydeevnen.

## Tilbage til projektet
Lad os tilføje den brugerdefinerede Poppins Google-skrifttype til vores app.

1. Opret en ny fil kaldet `fonts.ts` i mappen `app/ui`;
2. Importér `Poppins`-skrifttypen fra modulet `next/font/google`;
3. Vi skal også angive skrifttypens `weight` og `subsets`.

Vi er klar til at bruge `Poppins`-skrifttypen i appen. Anvend den på `body`-elementet i `app/layout.tsx`.

Som resultat anvender hele appen `Poppins`-skrifttypen.

I næste kapitel tilføjes yderligere skrifttyper.

Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Implementering af autentificering i Next.js.

Tilføjelse af Brugerdefinerede Google Fonts

Tilbage til projektet

I praksis

Awesome!

Tilføjelse af Brugerdefinerede Google Fonts

Tilbage til projektet

I praksis