Hur man lägger till webbteckensnitt på en Next.js-webbplats

Hur man lägger till webbteckensnitt på en Next.js-webbplats

Webbteckensnitt är ett utmärkt sätt att lägga till anpassade typsnitt på din webbplats. Dessa typsnitt kanske inte är tillgängliga på en användares system, så du måste inkludera dem i ditt projekt genom att vara värd för dem eller referera till dem via ett CDN.





Lär dig hur du inkluderar webbteckensnitt på en Next.js-webbplats med dessa två metoder.



MAKEUSE AV DAGENS VIDEO

Använda self-hosted fonts i Next.js

För att lägga till egenvärdiga typsnitt i Next.js måste du använd @font-face CSS-regeln . Denna regel låter dig lägga till anpassade typsnitt på en webbsida.





Innan du använder font-face måste du ladda ner de typsnitt du vill använda. Det är många webbplatser på internet som erbjuder gratis typsnitt , inklusive Google-teckensnitt, fontspace och dafont-webbplatser.

När du har laddat ner webbteckensnitten, konvertera dem till olika teckensnittsformat för att stödja flera webbläsare. Du kan använda gratis verktyg för teckensnittskonvertering online att göra så. Moderna webbläsare stöder formaten .woff och .woff2. Om du behöver stödja äldre webbläsare bör du även tillhandahålla .eot- och .ttf-format.



Skapa en ny mapp som heter teckensnitt i din webbplatskatalog och spara dina konverterade teckensnittsfiler där.

Nästa steg är att inkludera teckensnitten i styles/global.css fil för att göra dem tillgängliga för hela webbplatsen. Det här exemplet visar teckensnitten för sjöjungfrun med fet stil:



@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 inkluderat teckensnittsfilerna kan du använda dessa teckensnitt i en CSS-fil på komponentnivå:

vad betyder denna emoji? 
h1 { 
    font-family: Mermaid; 
}

Inklusive webbteckensnitt till Next.js via ett CDN

Vissa webbplatser serverar webbteckensnitt via ett CDN som du kan importera till din app. Detta tillvägagångssätt är lätt att ställa in eftersom du inte behöver ladda ner typsnitt eller skapa teckensnitt. Dessutom, om du använder Google-typsnitt eller TypeKit, hanterar Next.js automatiskt optimering.



Du kan lägga till teckensnitt från ett CDN med hjälp av länktaggen eller @import-regeln i en CSS-fil.

Länktaggen går alltid in i head-taggen i ett HTML-dokument. För att lägga till en head-tagg i Next.js måste du skapa ett anpassat dokument. Detta dokument ändrar head- och body-taggen som används för att rendera varje sida.

Börja använda den här anpassade dokumentfunktionen genom att skapa filen /pages/_document.js.

Inkludera sedan länken till teckensnittet i huvudet 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;

Hur man använder @import-regeln för att inkludera teckensnitt i ett Next.js-projekt

Ett annat alternativ är att använda @import-regeln i CSS-filen du vill använda typsnittet.

Gör till exempel teckensnittet tillgängligt i hela projektet genom att importera webbteckensnittet i styles/global.css fil.

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

Du kan nu referera till teckensnittsfamiljen i en CSS-väljare så här:

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

@import-regeln låter dig importera ett teckensnitt i en innesluten CSS-fil. Genom att använda länktaggen blir typsnittet tillgängligt på hela webbplatsen.

Ska du vara värd för teckensnitt lokalt eller importera dem via ett CDN?

Typsnitt som lagras lokalt är vanligtvis snabbare än teckensnitt som importeras från ett CDN. Detta beror på att webbläsaren inte behöver göra en ytterligare begäran till typsnittet CDN när webbsidan har laddats.

den bästa musiknedladdningsappen för Android

Om du vill använda importerade teckensnitt, förladda dem för att förbättra webbplatsens prestanda. Om typsnitten är tillgängliga på Google-typsnitt eller Typekit kan du importera dem och dra nytta av Next.js optimeringsfunktioner.