next google fonts Download - next google fonts Source Téléchargement du code

next google fonts

Code Source AI

v2.2.0

Télécharger

️

Ce projet a été obsolète

Depuis Next.js 10.2, les polices Google sont automatiquement optimisées?

Merci pour tout votre amour et votre soutien pour ce projet,
Joe

Fonts de google suivants

Une petite aide next/head pour charger des polices Google rapidement et asynchrone ⏩

Utilisation de Next.js 10? Voir "Comment cela se compare-t-il à l'optimisation de la police suivante. avant de continuer.

Table des matières

Installation
FAQ

Installation

Dans cet exemple, nous allons ajouter Inter (en particulier les poids 400 et 700 ) à une application suivante.js.

Voir Joebell.co.uk pour un exemple de travail.

Ajoutez le package à votre projet Next.js:
```
npm i next-google-fonts
```

Créez un composant Head personnalisé.

Il est important de reconnaître que next-google-fonts sont un petit composant next/head et ne devraient pas être imbriqués à l'intérieur next/head . Pour résoudre ce problème, enveloppez les deux composants avec un Fragment .

 // 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 >
) ;

Ajoutez les polices Google demandées à vos styles avec un repli sensible. Peu importe que vous utilisiez CSS ou SASS ou CSS-in-JS:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
Exécutez votre application Next.js pour voir les résultats en action!
Vous devez vous attendre à voir la police de secours en premier, suivie d'un passage à la / s de Google sans aucun avertisseur CSS bloquant le rendu. Vos polices continueront de s'afficher jusqu'à ce que votre application soit réhydratée.
Si JS est désactivé, seule la police de secours s'affichera.

FAQ

Comment cela se compare-t-il à l'optimisation de la police suivante.
Pourquoi?

Comment cela se compare-t-il à l'optimisation de la police suivante.

Next.js 10 a introduit l'optimisation automatique des polices Google, vous pouvez prendre une décision sur la solution à utiliser en fonction des critères suivants:

"Mes polices ne sont pas prioritaires et peuvent être chargées de manière asynchrone " - utilisez next-google-fonts .
"Mes polices sont prioritaires et ne doivent pas être chargées de manière asynchrone " - utilisez Next.js Optimisation des polices.

Pour plus de lecture, consultez la discussion sur le numéro suivant.

Pourquoi?

next-google-fonts vise à rendre le processus d'utilisation des polices Google dans Next.js plus cohérentes, plus rapides et indolores: il se permettra de faire des actifs, de précharges et de charge de manière asynchrone le fichier CSS.

Dans l'itération actuelle de next/head , nous ne pouvons pas utiliser la méthode familière "Hack Media Hack" de chargement de police Google asynchrone:

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