logo oujood
🔍

font-synthesis : contrôler la synthèse de police dans le navigateur

Quand une police ne contient pas la graisse ou l'italique demandé, le navigateur improvise. font-synthesis vous permet de décider si c'est acceptable ou non.

OUJOOD.COM

À quoi sert font-synthesis ?

Quand vous déclarez font-weight: bold ou font-style: italic sur un texte, le navigateur cherche d'abord la variante correspondante dans votre police. Si elle n'existe pas — votre police web ne contient pas de fichier "bold", par exemple — il la simule en épaississant ou en inclinant les glyphes. C'est ce qu'on appelle la synthèse de police.

Le résultat est souvent médiocre : proportions cassées, lettres artificiellement déformées. La propriété font-synthesis vous donne la main sur ce comportement. Vous pouvez l'autoriser, le restreindre à un seul axe, ou l'interdire complètement.

Syntaxe de font-synthesis

La propriété accepte une ou plusieurs valeurs parmi : none, weight et style. Sans déclaration de votre part, les navigateurs appliquent weight style par défaut — ils synthétisent tout ce qui manque.

  📋 Copier le code

/* Les quatre combinaisons possibles */
font-synthesis: none;          /* aucune synthèse autorisée */
font-synthesis: weight;        /* synthèse de graisse uniquement */
font-synthesis: style;         /* synthèse d'italique uniquement */
font-synthesis: weight style;  /* les deux autorisés (comportement par défaut) */

Les valeurs expliquées

none interdit toute improvisation. Si la variante demandée est absente, le texte s'affiche dans la variante disponible la plus proche, sans distorsion. À utiliser quand vous gérez vous-même toutes les variantes via @font-face.

weight autorise la simulation du gras, mais pas l'inclinaison des caractères pour l'italique. Utile si vous avez chargé l'italique mais pas le bold.

style fait l'inverse : l'italique simulé est permis, le gras synthétique non.

weight style autorise les deux. C'est le comportement du navigateur si vous ne déclarez pas la propriété.

Exemple concret : police personnalisée sans variantes

Vous chargez une police web qui n'existe qu'en version "regular", puis vous l'utilisez en gras et en italique dans votre CSS. Sans font-synthesis: none, le navigateur fabrique ces styles à la volée — souvent de façon visible et peu satisfaisante.

  📋 Copier le code

/* Chargement d'une police sans variante bold ni italic */
@font-face {
  font-family: 'MaPolice';
  src: url('mapolice-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
/* On interdit toute synthèse sur les éléments qui utilisent cette police */
.titre-principal {
  font-family: 'MaPolice', sans-serif;
  font-synthesis: none;
}
Résultat : si un <strong> se trouve à l'intérieur de .titre-principal, le texte ne sera pas artificiellement épaissi. Il s'affiche dans la variante normale de la police — visuellement plus propre que la simulation.

Exemple avec synthèse partielle

Vous avez chargé la variante bold mais pas italic — ou l'inverse. Plutôt que de tout bloquer ou tout laisser passer, vous pouvez n'autoriser que ce qui manque réellement.

  📋 Copier le code

.bloc-texte {
  font-family: 'MaPolice', sans-serif;
  /*
    On a chargé la variante bold, pas italic.
    On autorise seulement la synthèse d'italique.
  */
  font-synthesis: style;
}

Récapitulatif des valeurs

Les quatre cas côte à côte :

  📋 Copier le code

.pas-de-synthese  { font-synthesis: none; }         /* rien simulé */
.gras-seul        { font-synthesis: weight; }        /* bold simulé OK, italic non */
.italique-seul    { font-synthesis: style; }         /* italic simulé OK, bold non */
.tout-autorise    { font-synthesis: weight style; }  /* comportement navigateur par défaut */

Compatibilité navigateur en 2026

font-synthesis est bien prise en charge par Chrome, Firefox, Safari et Edge récents. Pour vérifier la compatibilité avec vos cibles exactes, caniuse.com reste la référence.

- Liste des propriétés css -

Par carabde | Mis à jour le 29 avril 2026