Générateur de @font-face

Générateur de @font-face: à quoi ça sert

Pour utiliser votre propre police sur le site, sans dépendre de Google Fonts, il faut héberger les fichiers et déclarer chacun avec @font-face. Se tromper de graisse ou oublier font-display rend le texte invisible pendant le chargement ou donne un faux gras.

Choisissez les fichiers et l’outil détermine la graisse et le style d’après le nom (Regular, Bold, SemiBold, Italic, 700, variable), regroupe les formats de la même variante, génère les règles avec font-display: swap et la balise preload avec crossorigin pour la police du premier écran, et affiche un aperçu avec la vraie police.

Mode d’emploi

1. Choisissez les fichiers de la police.
2. Vérifiez le nom de la famille, les graisses et le dossier.
3. Copiez le CSS et la balise preload.

Quand l’utiliser

• Utiliser la police de la marque sur le site.
• Héberger la police au lieu d’utiliser Google Fonts.
• Corriger une police qui s’affiche avec un mauvais gras.

Questions fréquentes

Quel format de police utiliser ?

WOFF2. Il est compressé et accepté par tous les navigateurs actuels : sur la plupart des sites, il suffit donc. TTF et OTF fonctionnent, mais pèsent beaucoup plus ; convertissez en WOFF2 avant de publier.

À quoi sert font-display: swap ?

Il affiche le texte immédiatement avec une police système et la remplace par la vôtre quand elle a fini de se télécharger. Sans cela, le navigateur peut masquer le texte pendant quelques secondes, ce que PageSpeed signale comme un problème.

Dois-je utiliser preload sur toutes les polices ?

Non, seulement sur celles utilisées dès le premier écran, généralement une ou deux (le texte courant et le titre). Trop de preload se dispute la connexion avec l’image principale et peut dégrader le chargement. Le preload d’une police a besoin de l’attribut crossorigin, même sur le propre domaine.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires