Sådan tilføjer du webskrifttyper til et Next.js-websted

Sådan tilføjer du webskrifttyper til et Next.js-websted

Webskrifttyper er en fantastisk måde at tilføje brugerdefinerede skrifttyper til dit websted. Disse skrifttyper er muligvis ikke tilgængelige på en brugers system, så du skal inkludere dem i dit projekt ved at hoste dem eller henvise til dem via et CDN.





Lær, hvordan du inkluderer webskrifttyper på et Next.js-websted ved hjælp af disse to metoder.



apple watch serie 3 vs 6
MAKEUSE AF DAGENS VIDEO

Brug af Self-Hosted Fonts i Next.js

For at tilføje selvhostede skrifttyper i Next.js skal du brug @font-face CSS-reglen . Denne regel giver dig mulighed for at tilføje brugerdefinerede skrifttyper til en webside.





Før du bruger font-face, skal du downloade de skrifttyper, du vil bruge. Der er mange websteder på internettet, der tilbyder gratis skrifttyper , herunder Google-skrifttyper, fontspace og dafont-websteder.

Når du har downloadet webskrifttyperne, skal du konvertere dem til forskellige skrifttypeformater for at understøtte flere browsere. Du kan bruge gratis online skrifttypekonverteringsværktøjer for at gøre det. Moderne webbrowsere understøtter formaterne .woff og .woff2. Hvis du har brug for at understøtte ældre browsere, bør du også levere .eot- og .ttf-formater.



Opret en ny mappe kaldet skrifttyper i dit webstedsbibliotek og gem dine konverterede skrifttypefiler der.

Det næste trin er at inkludere skrifttyperne i styles/global.css fil for at gøre dem tilgængelige for hele webstedet. Dette eksempel viser skrifttyperne for havfrueskrifttypen med fed skrift:



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

Når du har inkluderet skrifttypefilerne, kan du bruge disse skrifttyper i en CSS-fil på komponentniveau:

h1 { 
    font-family: Mermaid; 
}

Inkluderer webskrifttyper til Next.js via et CDN

Nogle websteder serverer webskrifttyper via et CDN, som du kan importere til din app. Denne tilgang er nem at konfigurere, fordi du ikke behøver at downloade skrifttyper eller oprette skrifttyper. Derudover, hvis du bruger Google-skrifttyper eller TypeKit, håndterer Next.js automatisk optimering.



Du kan tilføje skrifttyper fra et CDN ved hjælp af link-tagget eller @import-reglen inde i en CSS-fil.

Link-tagget går altid inde i head-tagget i et HTML-dokument. For at tilføje et head tag i Next.js skal du oprette et brugerdefineret dokument. Dette dokument ændrer head- og body-tagget, der bruges til at gengive hver side.

Begynd at bruge denne brugerdefinerede dokumentfunktion ved at oprette filen /pages/_document.js.

Inkluder derefter linket til skrifttypen i hovedet på filen _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;

Sådan bruger du @import-reglen til at inkludere skrifttyper i et Next.js-projekt

En anden mulighed er at bruge @import-reglen i den CSS-fil, du vil bruge skrifttypen.

Gør f.eks. skrifttypen tilgængelig på tværs af hele projektet ved at importere webskrifttypen i styles/global.css fil.

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

Du kan nu henvise til skrifttypefamilien i en CSS-vælger sådan her:

galaxy watch active 2 vs galaxy watch 3 
h1 { 
    font-family:'Libre Caslon Display', serif; 
}

@import-reglen giver dig mulighed for at importere en skrifttype i en indeholdt CSS-fil. Brug af link-tagget gør skrifttypen tilgængelig på hele webstedet.

Skal du være vært for skrifttyper lokalt eller importere dem via et CDN?

Skrifttyper, der hostes lokalt, er normalt hurtigere end skrifttyper, der importeres fra et CDN. Dette skyldes, at browseren ikke behøver at lave en yderligere anmodning til skrifttypen CDN, når websiden er indlæst.

Hvis du vil bruge importerede skrifttyper, skal du forudindlæse dem for at forbedre webstedets ydeevne. Hvis skrifttyperne er tilgængelige på Google-skrifttyper eller Typekit, kan du importere dem og drage fordel af Next.js' optimeringsfunktioner.