Kako dodati web fontove na Next.js web stranicu

Kako dodati web fontove na Next.js web stranicu

Web fontovi izvrstan su način za dodavanje prilagođenih fontova na vaše web mjesto. Ovi fontovi možda nisu dostupni na korisnikovom sustavu, pa ih trebate uključiti u svoj projekt tako da ih hostirate ili referencirate putem CDN-a.





Naučite kako uključiti web fontove u Next.js web mjesto pomoću ove dvije metode.



MAKEUSEOF VIDEO DANA

Korištenje fontova s ​​vlastitim hostom u Next.js

Da biste dodali fontove koji se sami hostiraju u Next.js, trebate koristite @font-face CSS pravilo . Ovo pravilo vam omogućuje dodavanje prilagođenih fontova na web stranicu.





Prije korištenja font-facea, morate preuzeti fontove koje želite koristiti. Ima ih mnogo stranice na internetu koje nude besplatne fontove , uključujući web stranice Google fonts, fontspace i dafont.

Nakon što preuzmete web-fontove, pretvorite ih u različite formate fontova kako biste podržali više preglednika. Možeš koristiti besplatni online alati za pretvorbu fonta učiniti tako. Moderni web preglednici podržavaju formate .woff i .woff2. Ako trebate podržati naslijeđene preglednike, trebali biste osigurati i formate .eot i .ttf.



Napravite novu mapu pod nazivom fontovi u direktoriju vaše web stranice i tamo spremite svoje pretvorene datoteke fontova.

Sljedeći korak je uključivanje lica fonta u stilovi/globalno.css da biste ih učinili dostupnima cijeloj web stranici. Ovaj primjer prikazuje podebljane fontove za font sirene:



@font-face { 
    font-family: 'Mermaid'; 
    src: url('Mermaid-Bold.eot'); 
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'), 
        url('Mermaid-Bold.woff2') format('woff2'), 
        url('Mermaid-Bold.woff') format('woff'), 
        url('Mermaid-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    font-display: swap; 
}

Nakon što uključite datoteke fontova, možete koristiti te fontove u CSS datoteci na razini komponente:

h1 { 
    font-family: Mermaid; 
}

Uključivanje web-fontova u Next.js putem CDN-a

Neka web-mjesta poslužuju web-fontove putem CDN-a koje možete uvesti u svoju aplikaciju. Ovaj je pristup jednostavan za postavljanje jer ne morate preuzimati fontove ili stvarati lica fonta. Osim toga, ako koristite Google fontove ili TypeKit, Next.js automatski upravlja optimizacijom.



Možete dodati fontove iz CDN-a pomoću oznake veze ili pravila @import unutar CSS datoteke.

Oznaka veze uvijek ide unutar oznake glave HTML dokumenta. Da biste dodali oznaku head u Next.js, morate izraditi prilagođeni dokument. Ovaj dokument mijenja oznaku glave i tijela koja se koristi za prikaz svake stranice.

Počnite koristiti ovu prilagođenu značajku dokumenta stvaranjem datoteke /pages/_document.js.

Zatim uključite vezu na font u zaglavlju datoteke _document.js.

import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document { 
  static async getInitialProps(ctx) { 
    const initialProps = await Document.getInitialProps(ctx); 
    return { ...initialProps }; 
  } 
  render() { 
    return ( 
      <Html> 
        <Head> 
          <link 
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap" 
            rel="stylesheet" 
          /> 
        </Head> 
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  } 
} 
export default MyDocument;

Kako koristiti pravilo @import za uključivanje fontova u Next.js projekt

Druga je mogućnost korištenje pravila @import u CSS datoteci u kojoj želite koristiti font.

Na primjer, učinite font dostupnim u cijelom projektu uvozom web fonta u stilovi/globalno.css datoteka.

kako slika imati prozirnu pozadinu 
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Sada možete referencirati obitelj fontova u a CSS birač kao ovo:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

Pravilo @import omogućuje vam uvoz fonta u sadržanu CSS datoteku. Korištenje oznake veze čini font dostupnim na cijelom web-mjestu.

Trebate li fontove ugostiti lokalno ili ih uvesti putem CDN-a?

Fontovi hostirani lokalno obično su brži od fontova uvezenih s CDN-a. To je zato što preglednik ne mora postavljati dodatni zahtjev CDN-u fonta nakon što se web stranica učita.

Ako želite koristiti uvezene fontove, unaprijed ih učitajte kako biste poboljšali izvedbu stranice. Ako su fontovi dostupni na Google fontovima ili Typekitu, možete ih uvesti i iskoristiti značajke optimizacije Next.js.