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)

La oss rette oppmerksomheten mot skrifttypene som skal brukes i appen.

Appens skrifttyper blir automatisk optimalisert når vi bruker `next/font`-modulen med Next.js. Fontfilene lastes ned under byggingen og lagres sammen med dine andre statiske ressurser. Dermed vil det ikke være noen ekstra nettverksforespørsler etter skrifttyper når en bruker besøker applikasjonen, noe som bidrar til bedre ytelse.

## Tilbake til prosjektet
La oss legge til den tilpassede Google-skrifttypen Poppins for appen vår.

1. Opprett en ny fil kalt `fonts.ts` i mappen `app/ui`;
2. Importer `Poppins`-skrifttypen fra modulen `next/font/google`;
3. Vi bør også spesifisere fontens `weight` og `subsets`.

Vi er klare til å bruke `Poppins`-skriften i appen. La oss bruke den på `body`-elementet i `app/layout.tsx`.

Som et resultat bruker hele appen `Poppins`-skriften.

I neste kapittel skal vi inkludere flere skrifttyper.

Lær å bygge moderne, høytytende webapplikasjoner med Next.js. Sett opp prosjekter med strukturerte oppsett, styling og ruting for sømløs navigasjon. Hent og vis data effektivt samtidig som du optimaliserer rendering og ytelse. Implementer avanserte funksjoner som paginering, CRUD-operasjoner og globalt søk for dynamiske webapplikasjoner. Distribuer dine Next.js-prosjekter, koble dem til databaser og legg til autentisering for å beskytte brukerdata.

Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.

Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.

Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.

Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.

Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.

Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.

Implementering av autentisering i Next.js.

Legge til Egendefinerte Google Fonts

Tilbake til prosjektet

I praksis

Awesome!

Legge til Egendefinerte Google Fonts

Tilbake til prosjektet

I praksis