Nettfonter er en fin måte å legge til egendefinerte skrifter på nettstedet ditt. Disse fontene er kanskje ikke tilgjengelige på en brukers system, så du må inkludere dem i prosjektet ditt ved å være vert for dem eller referere til dem via et CDN.
Lær hvordan du inkluderer nettfonter på et Next.js-nettsted ved å bruke disse to metodene.
Bruk av selvvertsbaserte fonter i Next.js
For å legge til selvvertsbaserte fonter i Next.js, må du bruk @font-face CSS-regelen. Denne regelen lar deg legge til egendefinerte fonter på en nettside.
Før du bruker font-face, må du laste ned skriftene du vil bruke. Det er mange nettsteder på internett som tilbyr gratis fonter, inkludert Google-fonter, fontspace og dafont-nettsteder.
Når du har lastet ned nettfontene, konverterer du dem til forskjellige skriftformater for å støtte flere nettlesere. Du kan bruke gratis online fontkonverteringsverktøy å gjøre slik. Moderne nettlesere støtter formatene .woff og .woff2. Hvis du trenger å støtte eldre nettlesere, bør du også oppgi .eot- og .ttf-formater.
Opprett en ny mappe kalt fonter i nettstedets katalog og lagre de konverterte fontfilene der.
Det neste trinnet er å inkludere fontene i styles/global.css fil for å gjøre dem tilgjengelige for hele nettstedet. Dette eksemplet viser skrifttypene for havfruefonten med fet skrift:
@font-face {
font-familie: 'Havfrue';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('voff2'),
url('Mermaid-Bold.woff') format('uff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: fet;
font-stil: normal;
font-display: swap;
}
Når du har inkludert skriftfilene, kan du bruke disse skriftene i en CSS-fil på komponentnivå:
h1 {
font-familie: Havfrue;
}Inkludert nettfonter til Next.js via et CDN
Noen nettsteder serverer nettfonter via et CDN som du kan importere til appen din. Denne tilnærmingen er enkel å sette opp fordi du ikke trenger å laste ned fonter eller lage fonter. I tillegg, hvis du bruker Google-fonter eller TypeKit, håndterer Next.js automatisk optimalisering.
Du kan legge til fonter fra et CDN ved å bruke lenkekoden eller @import-regelen i en CSS-fil.
Link-taggen går alltid inn i head-taggen til et HTML-dokument. For å legge til en head-tag i Next.js, må du opprette et tilpasset dokument. Dette dokumentet endrer head- og body-taggen som brukes til å gjengi hver side.
Begynn å bruke denne egendefinerte dokumentfunksjonen ved å lage filen /pages/_document.js.
Inkluder deretter koblingen til fonten i hodet til _document.js-filen.
import Dokument, { Html, Head, Main, NextScript } fra "neste/dokument";
klasseMitt DokumentstrekkerDokument{
statiskasynkron getInitialProps (ctx) {
konst initialProps = avvente Document.getInitialProps (ctx);
komme tilbake { ...initialProps };
}
render() {
komme tilbake (
<Html>
<Hode>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=bytte"
rel="stilark"
/>
</Head>
<kropp>
<Hoved />
<NextScript />
</body>
</Html>
);
}
}
eksportmisligholde Mitt Dokument;Slik bruker du @import-regelen for å inkludere skrifter i et Next.js-prosjekt
Et annet alternativ er å bruke @import-regelen i CSS-filen du vil bruke fonten.
Gjør for eksempel skriften tilgjengelig på tvers av hele prosjektet ved å importere nettfonten i styles/global.css fil.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=bytte');
Du kan nå referere til skriftfamilien i en CSS-velger som dette:
h1 {
font-familie:'Libre Caslon-skjerm', serif;
}@import-regelen lar deg importere en font i en inneholdt CSS-fil. Ved å bruke lenkekoden blir skriften tilgjengelig på hele nettstedet.
Bør du være vert for fonter lokalt eller importere dem via en CDN?
Fonter som er vert lokalt er vanligvis raskere enn skrifter importert fra et CDN. Dette er fordi nettleseren ikke trenger å gjøre en ekstra forespørsel til fonten CDN når nettsiden er lastet inn.
Hvis du vil bruke importerte skrifter, forhåndslaster du dem for å forbedre nettstedets ytelse. Hvis skriftene er tilgjengelige på Google-fonter eller Typekit, kan du importere dem og dra nytte av Next.js sine optimaliseringsfunksjoner.
