Utiliser des polices personalisées

Astro prend en charge toutes les stratégies courantes pour ajouter des polices de caractères personnalisées à la conception de votre site. Ce guide vous présente deux options différentes pour inclure des polices Web dans votre projet.

Si vous souhaitez ajouter des fichiers de polices à votre projet, nous vous recommandons de les ajouter dans le fichier public/. Dans votre CSS, vous pouvez alors enregistrer les polices avec une déclaration @font-face et utiliser font-family pour rajouter la police à votre texte.

Imaginons que vous ayez un fichier de police DistantGalaxy.woff.

1. Rajoutez votre fichier à public/fonts/.

2. Rajouter @font-face dans votre CSS. Ceci pourais être dans un fichier global .css que vous importez ou un block <style> dans le layout ou component de votre choix.

   /* Enregistrer notre famille de polices personnalisée et indiquer au navigateur où la trouver. */
   @font-face {
     font-family: 'DistantGalaxy';
     src: url('/fonts/DistantGalaxy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. Utilisez font-family de la déclaration @font-face pour rajouter la police au component ou layout. Dans cet exemple, la déclaration <h1> va avoir la police rajoutés, alors que la déclaration <p> ne l’auras pas.

   ---
   ---
   
   <h1>Dans une galaxie très, très lointaine...</h1>
   
   <p>Les polices personnalisées rendent mes en-têtes beaucoup plus cool !</p>
   
   <style>
   h1 {
     font-family: 'DistantGalaxy', sans-serif;
   }
   </style>

Le projet Fontsource simplifie l’utilisation de Google Fonts et d’autres polices open source. Il fournit les modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser.

1. Trouvez la police que vous souhaitez dans le catalogue Fontsource. Pour cet exemple, on utilisera la police Twinkle Star.

2. Installez le paquet pour la police que vous avez choisie.

   npmpnpmYarn

   npm i @fontsource/twinkle-star

3. Importez le pack de polices dans le layout ou le component où vous souhaitez utiliser la police. En général, il est préférable d’effectuer cette opération dans un component de layout commun afin de s’assurer que la police est disponible sur l’ensemble du site.

   L’importation ajoutera automatiquement les déclarations @font-face nécessaires pour la police.

   ---
   import '@fontsource/twinkle-star';
   ---

4. Utilisez la déclaration font-family comme indiqué sur la page Fontsource de cette police. Cela fonctionnera partout où vous pouvez écrire du CSS dans votre projet Astro.

   h1 {
     font-family: "Twinkle Star", cursive;
   }

Si vous utilisez l’intégration Tailwind (EN), vous pouvez sois rajouter la déclaration @font-face pour une police locale ou utilisez la statégie import de Fontsource pour utiliser la police. Ensuite, suivez la documentation sur l’ajout de familles de polices personnalisées Tailwind.

Le guide des polices web MDN introduit le sujet.

le générateur de police Web Font Squirrel peut aider à préparer vos fichiers de police pour vous.