Weblettertypen zijn een geweldige manier om aangepaste lettertypen aan uw website toe te voegen. Deze lettertypen zijn mogelijk niet beschikbaar op het systeem van een gebruiker, dus u moet ze opnemen in uw project door ze te hosten of ernaar te verwijzen via een CDN.
Leer hoe u weblettertypen kunt opnemen in een Next.js-website met behulp van deze twee methoden.
Zelfgehoste lettertypen gebruiken in Next.js
Om zelf-gehoste lettertypen toe te voegen in Next.js, moet u dat doen gebruik de CSS-regel @font-face. Met deze regel kunt u aangepaste lettertypen aan een webpagina toevoegen.
Voordat u font-face gebruikt, moet u de lettertypen downloaden die u wilt gebruiken. Er zijn veel sites op internet die gratis lettertypen aanbieden, inclusief de Google fonts-, fontspace- en dafont-websites.
Nadat u de weblettertypen hebt gedownload, converteert u ze naar verschillende lettertype-indelingen om meerdere browsers te ondersteunen. Je kunt gebruiken gratis online hulpprogramma's voor het converteren van lettertypen
om dit te doen. Moderne webbrowsers ondersteunen de formaten .woff en .woff2. Als u verouderde browsers moet ondersteunen, moet u ook de formaten .eot en .ttf opgeven.Maak een nieuwe map aan met de naam lettertypen in uw sitemap en sla uw geconverteerde lettertypebestanden daar op.
De volgende stap is het opnemen van de fontfaces in het stijlen/global.css bestand om ze beschikbaar te maken voor de hele website. In dit voorbeeld worden de lettertypen voor het zeemeermin-lettertype vet weergegeven:
@lettertype {
font-familie: 'Meermin';
src: url('Zeemeermin-Bold.eot');
src: url('Zeemeermin-Bold.eot?#iefix') formaat('embedded-opentype'),
url('Zeemeermin-Bold.woff2') formaat('waf2'),
url('Zeemeermin-Bold.woff') formaat('waf'),
url('Zeemeermin-Bold.ttf') formaat('waartype');
font-weight: vet;
lettertype: normaal;
lettertypeweergave: verwisselen;
}
Nadat u de lettertypebestanden heeft opgenomen, kunt u die lettertypen gebruiken in een CSS-bestand op componentniveau:
h1 {
font-familie: Zeemeermin;
}Inclusief weblettertypen naar Next.js via een CDN
Sommige websites bieden weblettertypen via een CDN die u in uw app kunt importeren. Deze aanpak is eenvoudig in te stellen omdat u geen lettertypen hoeft te downloaden of lettertypen hoeft te maken. Bovendien, als u Google-lettertypen of TypeKit gebruikt, zorgt Next.js automatisch voor optimalisatie.
U kunt lettertypen van een CDN toevoegen met behulp van de link-tag of de @import-regel in een CSS-bestand.
De link-tag gaat altijd binnen de head-tag van een HTML-document. Om een head-tag toe te voegen in Next.js, moet u een aangepast document maken. Dit document wijzigt de head- en body-tag die wordt gebruikt om elke pagina weer te geven.
Begin deze aangepaste documentfunctie te gebruiken door het bestand te maken /pages/_document.js.
Neem vervolgens de link naar het lettertype op in de kop van het bestand _document.js.
importeren Document, { Html, Head, Main, NextScript } van "volgende/document";
klasMijn documentstrekt zich uitDocument{
statischasynchroon getInitialProps (ctx) {
const beginProps = wachten Document.getInitialProps (ctx);
opbrengst { ...initialProps };
}
veroorzaken() {
opbrengst (
<Html>
<Hoofd>
<koppeling
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&tonen=wisselen"
rel="stijlblad"
/>
</Head>
<lichaam>
<Voornaamst />
<VolgendeScript />
</body>
</Html>
);
}
}
exporterenstandaard Mijn document;Hoe u de @import-regel gebruikt om lettertypen op te nemen in een Next.js-project
Een andere optie is om de @import-regel te gebruiken in het CSS-bestand waarin u het lettertype wilt gebruiken.
Maak het lettertype bijvoorbeeld beschikbaar voor het hele project door het weblettertype te importeren in de stijlen/global.css bestand.
@import-URL('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&tonen=wisselen');
U kunt nu verwijzen naar de lettertypefamilie in een CSS-kiezer soortgelijk:
h1 {
font-familie:'Libre Caslon-display', schreef;
}Met de @import-regel kunt u een lettertype importeren in een ingesloten CSS-bestand. Door de link-tag te gebruiken, is het lettertype toegankelijk voor de hele site.
Moet u lettertypen lokaal hosten of importeren via een CDN?
Lettertypen die lokaal worden gehost, zijn meestal sneller dan lettertypen die zijn geïmporteerd uit een CDN. Dit komt omdat de browser geen extra verzoek hoeft te doen aan het lettertype CDN nadat de webpagina is geladen.
Als u geïmporteerde lettertypen wilt gebruiken, laadt u deze vooraf om de prestaties van de site te verbeteren. Als de lettertypen beschikbaar zijn op Google-lettertypen of Typekit, kunt u ze importeren en profiteren van de optimalisatiefuncties van Next.js.