Générateur

Générez des @font-face CSS de secours optimisés pour éliminer le Cumulative Layout Shift (CLS) causé par le chargement des polices.

Uploadez votre fonte

Glissez-déposez ou parcourez : on extraira automatiquement le nom du fichier pour la prochaine étape.

Nom de la police Détection du nom…

Veuillez saisir un nom de police.

Stack de repli

Sans — Arial + Roboto

Conseillé pour les fontes sans-sérif (Inter, Manrope, Open Sans, etc.)

Serif — Times New Roman + Roboto Serif

Conseillé pour les fontes à empattements (Lora, Merriweather, etc.)

Condensé — Impact + Roboto Condensed

Conseillé pour les fontes étroites ou display

size-adjust

ascent-override normal

descent-override normal

line-gap-override normal

L'aperçu est forcé en line-height: normal pour rendre cet override visible. La plupart des sites de production utilisent un line-height numérique — l'override n'y aura aucun effet.

Affichage :

size-adjust

ascent-override normal

descent-override normal

line-gap-override normal

L'aperçu est forcé en line-height: normal pour rendre cet override visible. La plupart des sites de production utilisent un line-height numérique — l'override n'y aura aucun effet.

Affichage :

Test du saut de mise en page

Comparez le rendu pendant le chargement de la police, avec et sans la fonte de repli ajustée. Le bloc fautif est mis en évidence en rouge quand il saute.

Uploadez une fonte pour activer le test

Échantillon de texte

Taille de la police

Sans fallback ajusté

Avec fallback ajusté

CSS prêt à intégrer

Copiez ou téléchargez ce CSS pour l'intégrer à votre site. Pensez à enregistrer aussi votre travail si vous voulez le retrouver dans la base.