Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Mukautettujen Google-fonttien Lisääminen | Next.js-projektin Perustaminen
Next.js 14 -osaaminen Modernien Web-sovellusten Rakentamiseen

bookMukautettujen Google-fonttien Lisääminen

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.

Käytännössä

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 8

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.08

bookMukautettujen Google-fonttien Lisääminen

Pyyhkäise näyttääksesi valikon

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.

Käytännössä

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 8
some-alt