Comment utiliser @next/font pour optimiser les polices dans Next.js

Vous pouvez vouloir utiliser des polices personnalisées pour rendre votre application Next.js plus attrayante visuellement. L’utilisation de polices personnalisées peut considérablement améliorer l’aspect et la convivialité de votre site Web, mais elle peut également ralentir les performances de votre site si elle n’est pas optimisée correctement. L’utilisation de polices personnalisées @next/font est une solution à ce problème.

Le package @next/font fournit un moyen simple et efficace d’optimiser le chargement des polices dans Next.js, améliorant ainsi le temps de chargement des pages et les performances globales. Cet article fournit des informations sur la façon d’utiliser @next/font dans votre projet Next.js.

Installation du package

Vous pouvez installer le paquetage @next/font en exécutant la commande suivante dans votre terminal :

Si vous utilisez yarn, vous pouvez installer le paquet en exécutant la commande suivante :

Utilisation de @next/font pour optimiser les polices Google

Les @next/font optimise l’utilisation des polices Google. Le paquet @next/font héberge automatiquement les polices Google sur le serveur Next.js, de sorte qu’aucune requête n’est envoyée à Google pour obtenir les polices.

Pour utiliser une police Google dans votre application, vous devez importer la police en tant que fonction à partir de @next/font/google dans le fichier _app.js dans le fichier pages dans le répertoire

Dans le bloc de code ci-dessus, vous avez créé une police variable à l’aide de l’attribut Roboto de Roboto. La fonction sous-ensemble permet de définir la police uniquement pour les caractères latins ; si vous utilisez une autre langue, vous pouvez définir la police pour cette langue.

Voir aussi :  Comprendre les actions dans Svelte

Vous pouvez également spécifier le poids de la police en même temps que le style de police lors de la définition de la police :

Vous pouvez spécifier plusieurs poids et styles de police à l’aide de tableaux.

Par exemple :

Ensuite, vous envelopperez vos composants dans un fichier principal et transmettre la police en tant que classe à la balise principale en tant que classe :

Le rendu de votre application avec le bloc de code ci-dessus appliquera la police à l’ensemble de votre application. Vous pouvez également appliquer la police à une seule page. Pour ce faire, vous devez ajouter la police à une page spécifique.

Par exemple :

Utilisation de @next/font pour optimiser les polices locales

Le @next/font optimise également l’utilisation des polices locales. La technique d’optimisation des polices locales par le paquetage @next/font est assez similaire à l’optimisation des polices Google, à quelques différences près.

Pour optimiser les polices locales, utilisez le paquet localFont fournie par la fonction @next/font . Vous importez la fonction localFont de @next/font/local puis définissez votre police variable avant d’utiliser la police dans votre application Next.js.

Comme par exemple :

Vous définissez la police variable maPolice en utilisant le localFont pour la fonction . La fonction localFont prend un objet comme argument. L’objet possède une seule propriété, src qui est définie comme le chemin d’accès au fichier de police dans la propriété WOFF2 format « ./my-font.woff2 ».

Voir aussi :  Comment créer des images Docker Python efficaces

Vous pouvez utiliser plusieurs fichiers de polices pour une même famille de polices. Pour ce faire, vous devez définir le format src à un tableau contenant les objets des différentes polices et leurs propriétés.

Par exemple :

Utilisation de @next/font avec Tailwind CSS

Pour utiliser la police @next/font @next/font avec Tailwind CSS, vous devez utiliser des variables CSS. Pour ce faire, vous définirez votre police à l’aide de Google ou de polices locales, puis vous chargerez votre police avec l’option variable pour spécifier le nom de la variable CSS.

Par exemple :

Dans le bloc de code ci-dessus, vous avez créé la police, inter, et vous avez défini la variable –font-inter. La variable nomdeclasse de l’élément principal est alors défini comme étant la variable police et font-sans. L’élément inter.variable appliquera la classe inter à la page, et la classe police-sans appliquera la police sans-serif par défaut.

Ensuite, vous ajoutez la variable CSS au fichier de configuration de tailwind tailwind.config.cjs:

Vous pouvez maintenant appliquer la police dans votre application à l’aide de la variable font-sans dans votre application.

Optimisation des polices avec @next/font

Le package @next/font est un moyen simple et efficace d’optimiser le chargement des polices dans Next.js. Ce package garantit que vos polices personnalisées sont chargées efficacement, ce qui améliore les performances de votre site web et l’expérience utilisateur. Cet article fournit des informations sur la façon de mettre en place le package @next/font et de l’utiliser dans votre application Next.js. Vous pouvez encore améliorer les performances de votre site en optimisant les images.

Voir aussi :  Comment parcourir un dictionnaire en Python

S’abonner à notre lettre d’information

Comment utiliser des polices personnalisées dans next js ?

Il y a deux façons d’ajouter des polices Google dans Next.js

  • Next Head component avec CDN.
  • Télécharger la police localement et ajouter Next.js.
  • Utiliser la méthode d’importation CSS.

Qu’est-ce que l’optimisation des polices dans Next JS ?

Optimisation des polices. next/font optimisera automatiquement vos polices (y compris les polices personnalisées) et supprimera les requêtes réseau externes pour améliorer la confidentialité et les performances.

Comment optimiser ma police ?

Conseils pour l’optimisation des polices

  • Vérifier et contrôler l’utilisation des polices. La prise en charge par les navigateurs de la règle CSS @font-face étant désormais généralisée, l’utilisation de polices web personnalisées a explosé.
  • Sous-ensemble de ressources de polices.
  • Fournissez des formats de polices optimisés à chaque navigateur.
  • Donner la priorité à local() dans la liste src.
  • Mettre la demande de polices de caractères plus tôt.
  • Une bonne mise en cache est indispensable.
Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *