Verkkokirjasimet ovat loistava tapa lisätä mukautettuja kirjasimia verkkosivustollesi. Nämä kirjasimet eivät välttämättä ole saatavilla käyttäjän järjestelmässä, joten sinun on sisällytettävä ne projektiisi isännöimällä niitä tai viittaamalla niihin CDN: n kautta.

Opi lisäämään verkkokirjasimia Next.js-verkkosivustoon näillä kahdella menetelmällä.

Itseisännöityjen fonttien käyttäminen Next.js: ssä

Jos haluat lisätä itse isännöityjä kirjasimia Next.js: ään, sinun on tehtävä se käytä @font-face CSS-sääntöä. Tämän säännön avulla voit lisätä mukautettuja kirjasimia verkkosivulle.

Ennen font-facen käyttöä sinun on ladattava fontit, joita haluat käyttää. On olemassa monia Internetin sivustot, jotka tarjoavat ilmaisia ​​fontteja, mukaan lukien Google-fontit, fontspace- ja dafont-sivustot.

Kun olet ladannut verkkofontit, muunna ne eri kirjasinmuotoihin tukemaan useita selaimia. Voit käyttää ilmaiset online-kirjasinten muunnostyökalut tehdä niin. Nykyaikaiset verkkoselaimet tukevat .woff- ja .woff2-muotoja. Jos haluat tukea vanhoja selaimia, sinun tulee tarjota myös .eot- ja .ttf-muotoja.

Luo uusi kansio nimeltä fontit sivustosi hakemistoon ja tallenna muunnetut kirjasintiedostot sinne.

Seuraava vaihe on sisällyttää kirjasinpinnat styles/global.css tiedostoa, jotta ne ovat käytettävissä koko verkkosivustolla. Tässä esimerkissä Mermaid-kirjasimen kirjasinpinnat näkyvät lihavoituna:

@font-face {
 font-family: 'Merenneito';
 src: url('Mermaid-Bold.eot');
 src: url('Mermaid-Bold.eot?#iefix') muoto('upotettu-avointyyppi'),
 url('Mermaid-Bold.woff2') muoto('woff2'),
 url('Mermaid-Bold.woff') muoto('woff'),
 url('Mermaid-Bold.ttf') muoto('tosityyppi');
 fontin paino: lihavoitu;
 font-tyyli: normaali;
 fontin näyttö: swap;
}

Kun olet sisällyttänyt kirjasintiedostot, voit käyttää niitä komponenttitason CSS-tiedostossa:

h1 {
 kirjasinperhe: Merenneito;
}

Web-fontit sisällytetään Next.js-tiedostoon CDN: n kautta

Jotkut verkkosivustot tarjoavat verkkofontteja CDN: n kautta, jonka voit tuoda sovellukseesi. Tämä lähestymistapa on helppo ottaa käyttöön, koska sinun ei tarvitse ladata kirjasimia tai luoda fontteja. Lisäksi, jos käytät Google-fontteja tai TypeKitiä, Next.js hoitaa optimoinnin automaattisesti.

Voit lisätä fontteja CDN: stä käyttämällä CSS-tiedoston sisällä olevaa linkkitunnistetta tai @import-sääntöä.

Linkkitunniste menee aina HTML-dokumentin head-tunnisteen sisään. Jos haluat lisätä head-tunnisteen Next.js-tiedostoon, sinun on luotava mukautettu asiakirja. Tämä asiakirja muuttaa kunkin sivun hahmontamiseen käytettyä head- ja body-tunnistetta.

Aloita tämän mukautetun asiakirjaominaisuuden käyttäminen luomalla tiedosto /pages/_document.js.

Lisää sitten linkki fonttiin _document.js-tiedoston päähän.

tuonti Asiakirja, { Html, Head, Main, NextScript } alkaen "Seuraava/asiakirja";
luokkaaMyDocumentulottuuAsiakirja{
staattinenasynk getInitialProps (ctx) {
konst originalProps = odottaa Document.getInitialProps (ctx);
palata { ...initialProps };
 }
 render() {
palata (
<HTML>
<Pää>
<linkki
 href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&näyttö=vaihto"
 rel="tyylisivu"
 />
</Head>
<kehon>
<Pää/>
<NextScript />
</body>
</Html>
 );
 }
}
viedäoletuksena MyDocument;

@import-säännön käyttäminen kirjasimien sisällyttämiseen Next.js-projektiin

Toinen vaihtoehto on käyttää @import-sääntöä CSS-tiedostossa, jonka fonttia haluat käyttää.

Voit esimerkiksi asettaa fontin saataville koko projektissa tuomalla verkkokirjasimen hakemistoon styles/global.css tiedosto.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&näyttö=vaihto');

Voit nyt viitata kirjasinperheeseen kohdassa a CSS-valitsin kuten tämä:

h1 {
 font-family:'Ilmainen Caslon-näyttö', serif;
}

@import-säännön avulla voit tuoda kirjasimen CSS-tiedostoon. Linkkitunnisteen avulla fontti on käytettävissä koko sivustolla.

Pitäisikö sinun isännöidä fontteja paikallisesti vai tuoda ne CDN: n kautta?

Paikallisesti isännöidyt fontit ovat yleensä nopeampia kuin CDN: stä tuodut kirjasimet. Tämä johtuu siitä, että selaimen ei tarvitse tehdä lisäpyyntöä fontin CDN: lle, kun verkkosivu on latautunut.

Jos haluat käyttää tuotuja kirjasimia, esilataa ne parantaaksesi sivuston suorituskykyä. Jos fontit ovat saatavilla Google-fonteissa tai Typekitissä, voit tuoda ne ja hyödyntää Next.js: n optimointiominaisuuksia.