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)

Låt oss nu fokusera på de typsnitt som ska användas i applikationen.

Applikationens typsnitt optimeras automatiskt när vi använder modulen `next/font` med Next.js. Typsnitts-filerna laddas ner vid byggtillfället och lagras tillsammans med dina andra statiska resurser. Som ett resultat krävs inga ytterligare nätverksförfrågningar för typsnitt när en användare besöker din applikation, vilket bidrar till förbättrad prestanda.

## Tillbaka till projektet
Lägg till det anpassade Google-typsnittet Poppins för vår applikation.

1. Skapa en ny fil med namnet `fonts.ts` i mappen `app/ui`;
2. Importera typsnittet `Poppins` från modulen `next/font/google`;
3. Ange även typsnittets `weight` och `subsets`.

Vi är redo att använda typsnittet `Poppins` i appen. Applicera det på `body`-elementet i `app/layout.tsx`.

Som resultat används typsnittet `Poppins` i hela appen.

I nästa kapitel inkluderas ytterligare typsnitt.

Lär dig att bygga moderna, högpresterande webbapplikationer med Next.js. Sätt upp projekt med strukturerade layouter, styling och routing för smidig navigering. Hämta och visa data effektivt samtidigt som rendering och prestanda optimeras. Implementera avancerade funktioner som paginering, CRUD-operationer och global sökning för dynamiska webbappar. Distribuera dina Next.js-projekt, anslut dem till databaser och lägg till autentisering för att skydda användardata.

Vi diskuterar vad du behöver kunna innan du börjar med Next.js-ramverket, vad du kan förvänta dig av denna kurs och vad du kommer att bygga.

Vi kommer att konfigurera projektet, undersöka olika sätt att lägga till styling i vår app och behandla visuella aspekter såsom bilder, typsnitt, sidor och layouter.

Lär dig att enkelt skapa och hantera en ny vy för din applikation samt navigera mellan alla sidor smidigt med ett inbyggt routingsystem.

Distribuera Next.js-appen med hjälp av GitHub- och Vercel-konton. Upprätta dessutom en databas för att förse appen med nödvändig data.

Överväg hur data kan erhållas och presenteras för användaren på ett tydligt och effektivt sätt.

Utforska hur moderna webbtekniker som paginering, CRUD-operationer, global sökning, formulärvalidering och mer implementeras.

Implementering av autentisering i Next.js.

Lägga till Anpassade Google-Teckensnitt

Tillbaka till projektet

I praktiken

Awesome!

Lägga till Anpassade Google-Teckensnitt

Tillbaka till projektet

I praktiken