Fontik

Comment utiliser une police sur un site web avec CSS

Pour afficher une police sur votre propre site, placez ses fichiers WOFF2 sur votre serveur et déclarez-les en CSS avec @font-face. Les visiteurs n’ont rien à installer.

Dernière mise à jour :

Étapes

  1. Utilisez les fichiers WOFF2 : ils sont légers et pris en charge par tous les navigateurs actuels. Le kit web téléchargeable depuis la page de la police contient des fichiers WOFF2 et du CSS prêt à l’emploi.
  2. Placez les fichiers de la police sur votre propre serveur, par exemple dans le dossier /fonts/.
  3. Déclarez la police en CSS avec @font-face : @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Utilisez-la dans vos styles et indiquez toujours des polices de secours : body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap affiche aussitôt le texte dans une police de secours, puis la remplace par la vôtre une fois chargée.
  6. Pour une police variable, utilisez un seul fichier et déclarez la plage de graisses dans @font-face, par exemple font-weight: 100 900.

Conseils

  • Préchargez le fichier principal avec cette balise dans le head de la page : <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Ne gardez que les graisses que vous utilisez réellement.
  • Servez les fichiers depuis la même origine que la page, ou envoyez des en-têtes CORS s’ils viennent d’un autre domaine.
  • Vérifiez que la licence autorise l’usage sur le web ; les polices gratuites sous licence ouverte le permettent en général.

Questions

De quels fichiers ai-je besoin pour un site web ?

Des fichiers WOFF2. Ils sont légers et fonctionnent dans tous les navigateurs actuels ; le kit web de la page de la police les contient avec du CSS prêt à l’emploi.

Les visiteurs doivent-ils installer la police ?

Non : le navigateur télécharge la police depuis votre serveur dès que la page la demande.

Puis-je utiliser la police dans un projet commercial ?

Cela dépend de la licence de la police. Lisez-la sur la page de la police dans le catalogue.

Autres guides