next google fonts Download - next google fonts Quellcode Download

next google fonts

AI-Quellcode

v2.2.0

Herunterladen

Euen

Dieses Projekt wurde veraltet

Ab dem nächsten.js 10.2 werden Google -Schriftarten automatisch optimiert?

Vielen Dank für all Ihre Liebe und Unterstützung für dieses Projekt,
Joe

Nächste-Google-FONTS

Ein winziger next/head Kopfhelfer zum Laden von Google -Schriftarten schnell und asynchron ⏩

NEXT.JS 10? Siehe "Wie ist dies mit der Next.js -Schriftoptimierung verglichen?" bevor sie fortfahren.

Inhaltsverzeichnis

Aufstellen
FAQs

Aufstellen

In diesem Beispiel werden wir einer nächsten.js -App Inter (insbesondere 400 und 700 ) hinzufügen.

In Joebell.co.uk finden Sie ein Arbeitsbeispiel.

Fügen Sie das Paket Ihrem nächsten.js -Projekt hinzu:
```
npm i next-google-fonts
```

Erstellen Sie eine benutzerdefinierte Head .

Es ist wichtig zu erkennen, dass next-google-fonts eine kleine next/head ist und nicht im next/head verschachtelt werden sollte. Um dies zu lösen, wickeln Sie beide Komponenten mit einem Fragment ein.

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

Fügen Sie die angeforderten Google -Schriftart/s Ihren Stilen mit einem vernünftigen Fallback hinzu. Es ist wirklich egal, ob Sie CSS oder SASS oder CSS-in-JS verwenden:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
Führen Sie Ihre Next.js -App aus, um die Ergebnisse als Aktion anzuzeigen!
Sie sollten erwarten, dass Sie zuerst die Fallback-Schriftart sehen, gefolgt von einem Wechsel zu den Google-Schriftart/s ohne render-blockierende CSS-Warnungen. Ihre Schriftart werden weiter angezeigt, bis Ihre App neu hydriert ist.
Wenn JS deaktiviert ist, wird nur die Fallback -Schriftart angezeigt.

FAQs

Wie ist dies im Vergleich zu Next.js -Schriftoptimierung?
Warum?

Wie ist dies im Vergleich zu Next.js -Schriftoptimierung?

NEXT.JS 10 Einführte automatische Optimierung von Google Font können Sie eine Entscheidung treffen, welche Lösung anhand der folgenden Kriterien verwendet werden soll:

"Meine Schriftarten haben keine Priorität und können asynchron geladen werden"-verwenden Sie next-google-fonts .
"Meine Schriftarten haben Priorität und sollten nicht asynchron geladen werden" - Next.js -Schriftoptimierung verwenden.

Weitere Informationen finden Sie im nächsten.js -Problemdiskussion.

Warum?

next-google-fonts zielt darauf ab, die Verwendung von Google-Schriftarten im nächsten zu gestalten.

In der aktuellen Iteration von next/head können wir die bekannte "Media Hack" -Methode der asynchronen Google -Schriftart nicht verwenden:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>