Polices auto-hébergées
Si vous souhaitez regrouper les polices utilisées dans votre application Web, alors Fontsource est une bibliothèque que vous voudrez peut-être consulter (lien également dans l'addendum à la fin de la page). Il vous permet d'installer les polices que vous souhaitez consommer, ce qui signifie que vos polices sont hébergées par vous-même et ne nécessitent pas de CDN pour se charger.
Installation de chaque police
Pour installer les polices que vous souhaitez utiliser, exécutez simplement la commande install pour chaque variante. Les extraits de code suivants montrent comment la police de cette PWA serait installée.
npm install @fontsource/work-sans
Dans le point d'entrée de mon application, je dois alors consommer le package installé en l'important. Cela me permet de définir précisément ce dont j'ai besoin sans ajouter de frais généraux. Comme les polices peuvent être assez grandes, c'est une excellente occasion d'économiser des octets.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Enfin, je dois définir la famille de polices dans mon CSS. Selon la bibliothèque que vous utilisez (par exemple Tailwind.css), ce code peut sembler un peu différent pour vous.
body {
font-family: "Work Sans", sans-serif;
}
Polices variables
Fontsource fournit également une option pour installer des polices variables, ce qui signifie que vous avez accès aux derniers outils en matière de chargement de polices. Veuillez noter que toutes les polices ne sont pas disponibles en tant que variantes variables.
