Comment ajouter une police personnalisée à un site

1. Préparez les fichiers de police

Vérifiez que votre licence autorise l’utilisation sur le web. Déposez ensuite vos fichiers TTF ou OTF dans le Webfont Generator et téléchargez le ZIP. Les fichiers WOFF2 suffisent généralement.

2. Importez les fichiers

Copiez le dossier fonts sur votre site, par exemple dans /fonts/. Les polices doivent être chargées depuis votre propre domaine, ou depuis un serveur qui envoie l’en-tête Access-Control-Allow-Origin approprié.

3. Ajoutez les règles @font-face

Chaque graisse et chaque style correspond à une règle :

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Gardez le même nom de famille pour toutes les graisses. Le navigateur choisit alors lui-même le bon fichier pour le texte normal et le texte en gras.

4. Utilisez la police

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Indiquez toujours des polices de secours, car elles s’affichent pendant le chargement de votre police ou si celle-ci ne se charge pas.

Ajouter des polices sur les plateformes populaires

• Webflow : rendez-vous dans Site settings → Fonts → Custom fonts et importez vos fichiers WOFF2.
• WordPress : les thèmes de blocs peuvent gérer les polices dans la bibliothèque de polices de l’éditeur de site. Avec les autres thèmes, ajoutez les fichiers à un thème enfant et placez le CSS dans sa feuille de style.
• Tailwind CSS : ajoutez les règles à votre CSS, puis définissez la police comme valeur de thème. L’onglet Tailwind du Webfont Generator vous fournit le code.

Vérifiez que tout fonctionne

Ouvrez votre site, puis ouvrez les outils de développement de votre navigateur. Dans le panneau Network, filtrez par Font et rechargez la page. Chaque fichier doit afficher le statut 200. Une erreur 404 indique généralement que le chemin dans votre CSS est incorrect. Une requête bloquée pointe en général vers l’en-tête cross-origin. Lancez ensuite le Page Speed Test pour voir l’effet des polices sur la vitesse.