Substitution de Polices dans Figma : Comment les Polices Manquantes Sont Remplacées et Consignées

Importez une page web en direct dans Figma et il y a de fortes chances qu'au moins une police arrive incorrecte. Ce n'est pas un bug de l'importateur. Ce sont deux modèles de polices différents qui se rencontrent pour la première fois : le navigateur a téléchargé une police au moment du chargement de la page, mais Figma ne reconnaît que les polices déjà installées sur votre ordinateur. La substitution de polices dans Figma comble exactement cet écart. C'est important parce qu'une police substituée peut changer silencieusement la longueur des lignes, les retours à la ligne et le rythme vertical de toute une mise en page.

Cet article explique pourquoi ce décalage se produit, comment Figma détecte et remplace une police manquante de son propre chef, ce qu'UnHTML substitue par défaut lors de la conversion d'une page, comment lire le rapport d'import produit après chaque exécution, et où la licence de police entre réellement en jeu une fois que vous avez la typographie de quelqu'un d'autre sous les yeux, dans votre propre fichier.

Pourquoi les polices d'une page manquent, pour commencer

Un navigateur affiche les polices d'une page via la règle CSS @font-face, qui liste une ou plusieurs sources pour une famille de police donnée et laisse le navigateur choisir la première qu'il peut utiliser. La règle @font-face est explicite sur l'ordre : une source local() doit précéder une source url(), afin qu'une police déjà installée sur la machine du visiteur soit utilisée avant tout téléchargement, et les indices format() ou tech() les plus spécifiques doivent précéder les moins spécifiques. Les fichiers de police référencés ainsi sont de même origine par défaut, utilisables ailleurs seulement si le serveur envoie des en-têtes CORS qui l'autorisent.

Rien de tout cela n'exige que la police touche jamais le gestionnaire de polices du visiteur. Une page peut afficher son titre dans une police d'affichage payante et soigneusement licenciée sans jamais demander au navigateur de l'installer localement. Le descripteur font-display contrôle même ce que voit un visiteur pendant que ce téléchargement est encore en cours, en affichant temporairement une police système puis en la remplaçant une fois le fichier réel arrivé. Du point de vue du lecteur, tout cet échange est invisible.

Figma fonctionne à l'inverse. Un calque de texte enregistre une police par son nom de famille et de style, et attend que cette police exacte soit présente dans votre gestionnaire de polices local. Quand ce n'est pas le cas, Figma n'a rien vers quoi se rabattre de lui-même, il se contente donc de signaler le calque. Cette seule différence, télécharger contre installer, explique entièrement pourquoi une page qui semblait correcte dans le navigateur peut fournir à un outil d'import une police à laquelle il n'a jamais eu accès.

Comment Figma signale une police manquante de son propre chef

La détection propre de Figma est simple une fois qu'on sait quoi chercher. Une police manquante affiche une petite icône dans la barre latérale gauche du fichier. Sélectionnez un calque de texte concerné et le même indicateur apparaît à côté du nom de la police dans la barre latérale droite. Les causes habituelles : une police tout simplement non installée, une graisse manquante au sein d'une famille par ailleurs installée, ou des collaborateurs utilisant des versions différentes de la même police.

À partir de là, le panneau Missing fonts (polices manquantes) liste chaque famille et graisse manquante dans le fichier et permet de choisir un remplacement pour chacune via un menu déroulant. Cliquer sur Replace fonts (remplacer les polices) applique le changement à tout le fichier, pour tous les collaborateurs, y compris ceux qui ont bien accès à la police d'origine. Figma recommande d'enregistrer une version au préalable, car le remplacement ne se limite pas à votre propre vue.

Deux limites méritent d'être gardées en tête. Figma ne prend en charge que les fichiers de police .TTF et .OTF, et ne prend pas du tout en charge les polices personnalisées sur ChromeOS ou Linux, où le sélecteur de polices se limite à Google Fonts, quel que soit ce qui est installé sur la machine. Si votre équipe travaille sur plusieurs plateformes, cela seul peut forcer une substitution qu'un utilisateur Mac ou Windows ne verrait jamais.

Ce qu'UnHTML substitue, et comment le changer

Le comportement par défaut d'UnHTML suit la même logique que la gestion propre à Figma des polices manquantes, simplement appliquée automatiquement au moment de l'import. Toute police que l'importateur n'a pas localement est substituée par Inter, et la famille de repli est configurable si Inter n'est pas le bon choix par défaut pour un projet donné. Rien dans cette substitution ne se produit silencieusement. Chaque substitution est consignée dans le rapport que produit l'import.

Ce rapport vaut la peine d'être lu attentivement, pas seulement survolé. Pour les questions de mise en page plus lourdes, comme quels frames n'ont pas pu conserver leur structure et sont retombés en positionnement absolu, l'article complémentaire sur ce qui survit à la conversion en calques couvre ce chemin de repli plus en détail. Les détails de tarification et de configuration pour ajuster la substitution par défaut se trouvent sur la page de tarifs.

Lire le rapport d'import

Chaque exécution produit un rapport couvrant trois choses : quelles polices ont été substituées et par quoi, quels frames sont retombés en positionnement absolu parce que leur mise en page ne pouvait pas être représentée en auto layout, et quelles images ont été ignorées.

Lisez-le avant de livrer un fichier, pas après. Une police de titre substituée change la largeur de caractère mesurée, ce qui peut déplacer les points de retour à la ligne sur toute une section d'une manière facile à manquer au premier coup d'œil. Deux paragraphes qui s'alignaient proprement sur la page source peuvent finir une ligne plus tôt ou plus tard une fois qu'Inter, plus étroite que beaucoup de polices d'affichage, prend le relais. Un frame retombé en positionnement absolu se comporte différemment dès que la longueur du contenu change, puisqu'il ne se redimensionne plus comme le ferait un frame en auto layout. Traiter le rapport comme une liste de vérification, plutôt que comme un journal qu'on survole après coup, permet de repérer les deux problèmes pendant qu'ils sont encore bon marché à corriger, avant qu'un client ou un collègue n'ouvre le fichier et ne demande pourquoi un titre passe mal à la ligne.

Licences de polices web, en termes simples

La licence de police est le point où la décision de substitution cesse d'être purement cosmétique. Les formats de polices web existent pour une raison de licence autant que technique : de nombreux fournisseurs de polices qui refusent de licencier un fichier TrueType ou OpenType brut pour un usage web acceptent de licencier la même famille packagée en WOFF ou WOFF2, parce que le format packagé limite la façon dont le fichier peut être réutilisé. C'est exactement pour cela qu'une police qui s'affiche proprement sur une page ne peut pas simplement être téléchargée et installée comme police de bureau sans vérifier ce que la licence autorise réellement.

En pratique, cela signifie que la licence de police web d'une page ne couvre presque jamais l'utilisation de ce même fichier comme police de bureau installée dans un outil de design, même pour un usage interne. Une licence de police web et une licence de bureau sont souvent vendues comme des postes séparés chez le même fournisseur, parfois à des prix différents, et une police parfaitement adaptée pour être servie depuis un serveur n'est pas automatiquement adaptée pour être installée sur une machine. La démarche honnête, et celle que privilégie par défaut une substitution de police, consiste à mettre en place un repli et à le consigner, puis à décider de façon délibérée s'il faut licencier ou se procurer la famille d'origine pour le fichier final, de la même manière qu'on vérifierait les conditions d'une photo de banque d'images avant de la réutiliser dans un nouveau contexte. Ce n'est pas une reproduction exacte au pixel près de la typographie de la page source, et le rapport d'import existe précisément pour que cet écart reste visible plutôt que d'être masqué.

Une police manquante lors d'un import Figma n'est pas vraiment un échec. C'est le résultat prévisible de deux modèles de polices, télécharger et installer, qui se rencontrent pour la première fois. Ce qui compte, c'est que la substitution soit visible : vérifiez le rapport d'import à chaque import, et traitez chaque changement de police comme une décision à prendre délibérément, pas comme un détail cosmétique à ignorer.