Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Polices Google Personnalisées | Concepts de Base
Next.js 14

book
Polices Google Personnalisées

Concentrons-nous sur les polices à utiliser dans l'application.

Les polices de l'application sont automatiquement optimisées lorsque nous utilisons le module next/font avec Next.js. Les fichiers de polices sont téléchargés au moment de la construction et hébergés avec vos autres ressources statiques. En conséquence, lorsqu'un utilisateur visite votre application, il n'y a pas de requêtes réseau supplémentaires pour les polices, ce qui aide à améliorer les performances.

Retour au projet

Ajoutons la police Google Poppins personnalisée pour notre application.

  1. Créez un nouveau fichier appelé fonts.ts dans le dossier app/ui;

  2. Importez la police Poppins depuis le module next/font/google;

  3. Nous devrions également spécifier le weight et les subsets de la police.

Nous sommes prêts à utiliser la police Poppins dans l'application. Appliquons-la à l'élément body dans le fichier app/layout.tsx.

En conséquence, l'ensemble de l'application utilise la police Poppins.

Dans le prochain chapitre, incluons des polices supplémentaires.

En Pratique

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 8

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

We use cookies to make your experience better!
some-alt