Utiliser des polices personnalisées

Ce guide vous montrera comment ajouter des polices web à votre projet et les utiliser dans vos composants.

Utilisation d’un fichier d’une police locale

Titre de la section Utilisation d’un fichier d’une police locale

Cet exemple démontre l’ajout d’une police personnalisée en utilisant le fichier de police DistantGalaxy.woff.

1. Ajoutez votre fichier de police à public/fonts/.

2. Ajoutez la déclaration @font-face suivante à votre CSS. Cela peut être dans un fichier .css global que vous importez, un bloc <style is:global>, ou un bloc <style> dans une mise en forme (layout) ou un composant spécifique où vous voulez utiliser cette police.

   /* 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 la valeur font-family de l’instruction @font-face pour styliser les éléments de votre composant ou de votre mise en forme (layout). Dans cet exemple, le titre <h1> aura la police personnalisée appliquée, alors que le paragraphe <p> ne l’aura pas.

   src/pages/example.astro

   ---
   ---
   
   <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>

Utilisation de Fontsource

Titre de la section Utilisation de Fontsource

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.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   Astuce

   Vous trouverez le nom du paquet correct dans la section « Quick Installation » (installation rapide) de chaque page de police sur le site de Fontsource. Il commence par @fontsource/ ou @fontsource-variable/ suivi du nom de la police.

3. Importez le paquet de polices dans le composant où vous souhaitez utiliser la police. Généralement, vous voudrez le faire dans un composant de mise en forme commun pour vous assurer que la police est disponible sur l’ensemble de votre site.

   L’importation ajoutera automatiquement les règles @font-face nécessaires pour configurer la police.

   src/layouts/BaseLayout.astro

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

4. Utilisez le nom de la police comme indiqué dans l’exemple body sur sa page Fontsource comme valeur font-family. Cela fonctionnera partout où vous pouvez écrire du CSS dans votre projet Astro.

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

Pour optimiser les temps de rendu de votre site Web, vous souhaiterez peut-être précharger les polices essentielles à l’affichage initial de la page. Consultez le guide Fontsource sur le préchargement des polices pour plus d’informations et d’utilisation.

Rajoutez des polices avec TailwindCSS

Titre de la section Rajoutez des polices avec TailwindCSS

Si vous utilisez l’intégration Tailwind, vous pouvez utiliser l’une ou l’autre des méthodes précédentes de cette page pour installer votre police, avec quelques modifications. Vous pouvez soit ajouter une déclaration @font-face pour une police locale ou utiliser la stratégie Fontsource’s import pour installer votre police.

Pour enregistrer votre police dans Tailwind :

1. Suivez l’un ou l’autre des guides ci-dessus, mais sautez l’étape finale qui consiste à ajouter font-family à votre CSS.

2. Ajoutez le nom de la police à tailwind.config.cjs.

   Cet exemple ajoute Inter à la pile de polices sans-serif, avec les polices de repli par défaut de Tailwind CSS.

   tailwind.config.cjs

   const defaultTheme = require("tailwindcss/defaultTheme");
   
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
       extend: {
         fontFamily: {
           sans: ['Inter', ...defaultTheme.fontFamily.sans],
         },
       },
     },
     plugins: [],
   }

   Maintenant, tout le texte sans-serif (le texte par défaut de Tailwind) dans votre projet utilisera la police choisie et la classe font-sans appliquera également la police Inter.

Voir la documentation de Tailwind sur l’ajout de polices personnalisées pour plus d’information.

Plus de ressources

Titre de la section Plus de ressources

• Apprendre comment fonctionnent les polices web dans le Guide des polices web de MDN.
• Générez du CSS pour votre police avec Font Squirrel’s Webfont Generator.