Weblettertypen toevoegen aan een Next.js-website

Weblettertypen toevoegen aan een Next.js-website

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 in uw project opnemen door ze te hosten of ernaar te verwijzen via een CDN.





Leer hoe u met behulp van deze twee methoden weblettertypen in een Next.js-website kunt opnemen.



MAKEUSEVAN VIDEO VAN DE DAG

Zelf-gehoste lettertypen gebruiken in Next.js

Om zelf-gehoste lettertypen toe te voegen in Next.js, moet je: gebruik de @font-face CSS-regel . 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 dat te doen. Moderne webbrowsers ondersteunen de formaten .woff en .woff2. Als u oudere browsers moet ondersteunen, moet u ook de indelingen .eot en .ttf opgeven.



Maak een nieuwe map met de naam lettertypen in uw sitemap en sla uw geconverteerde lettertypebestanden daar op.

De volgende stap is om de lettertypen op te nemen in de stijlen/global.css bestand om ze beschikbaar te maken voor de hele website. Dit voorbeeld toont de lettertypen voor het zeemeerminlettertype vetgedrukt:



@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; 
}

Nadat u de lettertypebestanden hebt opgenomen, kunt u die lettertypen gebruiken in een CSS-bestand op componentniveau:

h1 { 
    font-family: Mermaid; 
}

Weblettertypen opnemen in Next.js via een CDN

Sommige websites bieden weblettertypen aan 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 in Next.js toe te voegen, 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.

xbox one-controller gaat niet aan

Voeg vervolgens de link naar het lettertype toe aan de kop van het _document.js-bestand.

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;

De @import-regel gebruiken om lettertypen op te nemen in een Next.js-project

Een andere optie is om de @import-regel te gebruiken in het CSS-bestand waarvoor u het lettertype wilt gebruiken.

Maak het lettertype bijvoorbeeld in het hele project beschikbaar door het weblettertype te importeren in de stijlen/global.css het dossier.

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

U kunt nu verwijzen naar de lettertypefamilie in a CSS-kiezer soortgelijk:

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

Met de @import-regel kunt u een lettertype importeren in een ingesloten CSS-bestand. Het gebruik van de link-tag maakt het lettertype toegankelijk voor de hele site.

Moet u lettertypen lokaal hosten of importeren via een CDN?

Lokaal gehoste lettertypen zijn meestal sneller dan lettertypen die van een CDN zijn geïmporteerd. 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.