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.
Créez un nouveau fichier appelé
fonts.ts
dans le dossierapp/ui
;Importez la police
Poppins
depuis le modulenext/font/google
;Nous devrions également spécifier le
weight
et lessubsets
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
- , opens subtitles settings dialogsubtitles settings
- subtitles off
- , selectedFrench Captions
- 2x
- 1.5x
- , selected1x
- 0.5x
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion