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