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)

Keskitytään seuraavaksi sovelluksessa käytettäviin fontteihin.

Sovelluksen fontit optimoidaan automaattisesti, kun käytämme `next/font`-moduulia Next.js:n kanssa. Fonttitiedostot ladataan rakennusvaiheessa ja ne isännöidään muiden staattisten resurssien kanssa. Tämän ansiosta, kun käyttäjä vierailee sovelluksessasi, fontteja varten ei tehdä ylimääräisiä verkkopyyntöjä, mikä parantaa suorituskykyä.

## Takaisin projektiin
Lisätään sovellukseen mukautettu Poppins Google -fontti.

1. Luo uusi tiedosto nimeltä `fonts.ts` kansioon `app/ui`;
2. Tuo `Poppins`-fontti `next/font/google`-moduulista;
3. Määrittele myös fontin `weight` ja `subsets`.

Olemme valmiita käyttämään `Poppins`-fonttia sovelluksessa. Käytetään sitä `body`-elementissä tiedostossa `app/layout.tsx`.

Tämän seurauksena koko sovellus käyttää `Poppins`-fonttia.

Seuraavassa luvussa lisätään muita fontteja.

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Mukautettujen Google-fonttien Lisääminen

Takaisin projektiin

Käytännössä

Awesome!

Mukautettujen Google-fonttien Lisääminen

Takaisin projektiin

Käytännössä