Web fontovi izvrstan su način za dodavanje prilagođenih fontova na vaše web mjesto. Ovi fontovi možda nisu dostupni na korisničkom sustavu, pa ih morate 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.
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-lice {
obitelj-fontova: 'Sirena';
src: url('Sirena-Odvažna.eot');
src: url('Mermaid-Bold.eot?#iefix') format('ugrađeni otvoreni tip'),
url('Sirena-Odvažna.woff2') format('vau2'),
url('Sirena-Odvažna.woff') format('woff'),
url('Sirena-Podebljana.ttf') format('istiniti tip');
font-weight: bold;
stil fonta: normalan;
font-display: zamjena;
}
Nakon što uključite datoteke fontova, možete koristiti te fontove u CSS datoteci na razini komponente:
h1 {
obitelj-fontova: sirena;
}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.
uvoz Dokument, { Html, Head, Main, NextScript } iz "Sljedeći/dokument";
razredaMoj dokumentproteže seDokument{
statičkiasinkroni getInitialProps (ctx) {
konst početniProps = čekati Document.getInitialProps (ctx);
povratak { ...initialProps };
}
render() {
povratak (
<Html>
<glava>
<veza
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&prikaz=zamjena"
rel="stilski list"
/>
</Head>
<tijelo>
<Glavni />
<NextScript />
</body>
</Html>
);
}
}
izvozzadano MojDokument;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.
@uvezi url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&prikaz=zamjena');
Sada možete referencirati obitelj fontova u a CSS birač kao ovo:
h1 {
obitelj-fontova:'Besplatni Caslon zaslon', 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.
