So fügen Sie einer Next.js-Website Webfonts hinzu

So fügen Sie einer Next.js-Website Webfonts hinzu

Webfonts sind eine großartige Möglichkeit, benutzerdefinierte Schriftarten zu Ihrer Website hinzuzufügen. Diese Schriftarten sind möglicherweise nicht auf dem System eines Benutzers verfügbar, daher müssen Sie sie in Ihr Projekt aufnehmen, indem Sie sie hosten oder über ein CDN darauf verweisen.





Erfahren Sie, wie Sie mit diesen beiden Methoden Webfonts in eine Next.js-Website einbinden.



MAKEUSEOF VIDEO DES TAGES

Verwenden von selbst gehosteten Schriftarten in Next.js

Um selbst gehostete Schriftarten in Next.js hinzuzufügen, müssen Sie Verwenden Sie die CSS-Regel @font-face . Mit dieser Regel können Sie einer Webseite benutzerdefinierte Schriftarten hinzufügen.





So fügen Sie Klassen zu Google Kalender hinzu

Bevor Sie font-face verwenden, müssen Sie die Schriftarten herunterladen, die Sie verwenden möchten. Es gibt viele Websites im Internet, die kostenlose Schriftarten anbieten , einschließlich der Websites von Google Fonts, Fontspace und Dafont.

Nachdem Sie die Webfonts heruntergeladen haben, konvertieren Sie sie in verschiedene Schriftformate, um mehrere Browser zu unterstützen. Sie können verwenden kostenlose Online-Werkzeuge zur Konvertierung von Schriftarten dazu. Moderne Webbrowser unterstützen die Formate .woff und .woff2. Wenn Sie ältere Browser unterstützen müssen, sollten Sie auch die Formate .eot und .ttf bereitstellen.



Erstellen Sie einen neuen Ordner mit dem Namen Schriftarten in Ihrem Site-Verzeichnis und speichern Sie dort Ihre konvertierten Schriftartdateien.

Der nächste Schritt besteht darin, die Schriftarten in die einzufügen styles/global.css Datei, um sie der gesamten Website zur Verfügung zu stellen. Dieses Beispiel zeigt die Schriftarten für die Meerjungfrau-Schriftart in Fettdruck:



So greifen Sie vom PC aus auf das Android-Telefon zu 
@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; 
}

Nachdem Sie die Schriftartdateien eingebunden haben, können Sie diese Schriftarten in einer CSS-Datei auf Komponentenebene verwenden:

h1 { 
    font-family: Mermaid; 
}

Einbinden von Webfonts in Next.js über ein CDN

Einige Websites stellen Webfonts über ein CDN bereit, das Sie in Ihre App importieren können. Dieser Ansatz ist einfach einzurichten, da Sie keine Schriftarten herunterladen oder Schriftarten erstellen müssen. Wenn Sie Google-Schriftarten oder TypeKit verwenden, übernimmt Next.js außerdem automatisch die Optimierung.



Sie können Schriftarten aus einem CDN mit dem Link-Tag oder der @import-Regel in einer CSS-Datei hinzufügen.

Das Link-Tag gehört immer in das Head-Tag eines HTML-Dokuments. Um ein Head-Tag in Next.js hinzuzufügen, müssen Sie ein benutzerdefiniertes Dokument erstellen. Dieses Dokument ändert das head- und body-Tag, das zum Rendern jeder Seite verwendet wird.

Beginnen Sie mit der Verwendung dieser benutzerdefinierten Dokumentfunktion, indem Sie die Datei erstellen /pages/_document.js.

Fügen Sie dann den Link zur Schriftart in den Kopf der Datei _document.js ein.

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;

So verwenden Sie die @import-Regel zum Einschließen von Schriftarten in ein Next.js-Projekt

Eine andere Möglichkeit besteht darin, die @import-Regel in der CSS-Datei zu verwenden, in der Sie die Schriftart verwenden möchten.

Stellen Sie die Schriftart beispielsweise im gesamten Projekt zur Verfügung, indem Sie die Webschriftart in die importieren styles/global.css Datei.

So verwenden Sie den Inkognito-Modus auf dem iPhone 
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Sie können jetzt auf die Schriftfamilie in a verweisen CSS-Selektor so was:

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

Mit der @import-Regel können Sie eine Schriftart in eine enthaltene CSS-Datei importieren. Durch die Verwendung des Link-Tags wird die Schriftart auf der gesamten Website zugänglich.

Sollten Sie Schriftarten lokal hosten oder über ein CDN importieren?

Lokal gehostete Schriftarten sind in der Regel schneller als aus einem CDN importierte Schriftarten. Dies liegt daran, dass der Browser nach dem Laden der Webseite keine zusätzliche Anfrage an das Font-CDN stellen muss.

Wenn Sie importierte Schriftarten verwenden möchten, laden Sie diese vorab, um die Leistung der Website zu verbessern. Wenn die Schriftarten in Google Fonts oder Typekit verfügbar sind, können Sie sie importieren und die Optimierungsfunktionen von Next.js nutzen.