Vous faites défiler un flux de sites web et soudain, la voilà. La police parfaite que vous cherchiez depuis des semaines. Cette fioriture particulière sur le «a» minuscule et ces proportions qui font jubiler le typographe qui sommeille en vous. Mais le nom? L’auteur du site ne l’a pas indiqué, fouiller dans le CSS prend du temps, et le support du designer est en congés.

Une police à l’écran est une propriété CSS, pas une image. Le navigateur livre honnêtement le nom, la graisse, la taille et même la fonderie à quiconque sait où chercher. Ces dernières années, les outils d’identification de polices sont passés d’un simple onglet des outils de développement à des extensions qui affichent le prix des licences, suggèrent des alternatives gratuites et permettent de sauvegarder vos trouvailles dans une collection.

Dans ce guide, cinq méthodes: de l’instantané (clic droit) à l’avancé (analyse du fichier binaire de la police). Aucune ne nécessite de diplôme en design ni d’abonnement payant.

💡 Aperçu rapide:

• Fontanello: clic droit, et le nom de la police est déjà dans le menu contextuel (Chrome, Firefox, Edge, iOS)
• WhatFont: survolez le texte avec le curseur, voyez la famille, la taille, la couleur et le service de distribution (Chrome, Safari)
• Fonts Ninja: identifie la police, affiche le prix, sauvegarde les trouvailles dans les favoris (Chrome)
• Inspecteur intégré: méthode universelle pour tout navigateur, sans extension
• What Can My Font Do?: téléversez le fichier de police, le service décode même une police renommée

Comparatif des méthodes: tableau

1. Fontanello, la police dans le menu contextuel

Fontanello, une extension qui ajoute le nom de la police directement dans le menu contextuel du navigateur. Sélectionnez du texte, faites un clic droit, choisissez Fontanello, et vous voyez non seulement la famille de polices mais aussi la graisse, la taille, l’interlettrage et la couleur. Pas de panneau supplémentaire, pas besoin d’activer l’outil dans la barre d’outils.

L’extension fonctionne sous Chrome, Firefox, Edge et sur iOS. C’est la méthode la plus rapide de toutes: littéralement une seule action. Pas besoin de survoler quoi que ce soit avec le curseur, pas besoin de naviguer entre les onglets des outils de développement, un clic droit et la réponse est juste devant vous.

Avantages:

• Une seule action: clic droit et résultat dans le menu contextuel
• Compatible avec quatre plateformes: Chrome, Firefox, Edge, iOS
• Affiche les attributs supplémentaires: taille, couleur, interlettrage

Inconvénients:

• N’identifie pas les polices renommées
• Ne conserve pas l’historique des polices trouvées

Fontanello, le choix de ceux qui privilégient la rapidité. Un clic, pas d’activation, pas de gestes superflus.

🔗 Fontanello sur le Chrome Web Store

2. WhatFont, survolez et découvrez

WhatFont, l’une des extensions les plus populaires pour l’identification de polices: trois millions d’utilisateurs et une note de 4,0 sur le Chrome Web Store. Le principe est simple: cliquez sur l’icône WhatFont dans la barre d’outils, survolez le texte avec votre curseur, et un panneau apparaît sur la page avec toutes les informations sur la police.

Contrairement à Fontanello, WhatFont vous permet de mettre en surbrillance plusieurs fragments de texte simultanément et de comparer visuellement les polices. L’extension affiche la famille de polices, la graisse, la taille, l’interlignage et la couleur. Un atout supplémentaire: elle identifie la source de distribution de la police: API Google Fonts, Adobe Fonts (anciennement Typekit) ou @font-face local.

Avantages:

• Trois millions d’utilisateurs, extension stable et éprouvée
• Indique le service de distribution de la police: Google Fonts, Adobe Fonts, local
• Fonctionne sous Chrome et Safari

Inconvénients:

• Nécessite un clic sur l’icône pour l’activation, une action de plus par rapport à Fontanello
• Pas de version pour Firefox

🔗 WhatFont sur le Chrome Web Store

3. Fonts Ninja, le couteau suisse du designer

Fonts Ninja est allé au-delà de la simple identification de police. En plus du nom et des propriétés CSS, l’extension indique: le nombre de styles disponibles pour la police trouvée, le nom de la fonderie productrice, le prix de la licence et, ce qui est particulièrement précieux, une liste de polices similaires.

Le système de favoris intégré fait gagner des heures aux designers. Vous trouvez une police intéressante sur le site d’un confrère, vous la sauvegardez dans la collection directement depuis l’extension, et plus tard vous partagez la liste avec l’équipe. La recherche s’effectue par forme de glyphe, type de licence et prix, pratique lorsque vous cherchez une alternative économique à une police onéreuse.

L’extension est utilisée par 900 000 personnes, avec une note de 4,4. Elle ne fonctionne pour l’instant que sous Chrome. En termes de poids, elle est plus lourde que WhatFont, 2 Mo contre 741 Ko, mais les fonctionnalités le justifient.

Avantages:

• Affiche le prix de la police, la fonderie et des alternatives similaires
• Favoris intégrés pour les polices trouvées
• Recherche par forme de glyphe et type de licence

Inconvénients:

• Uniquement sous Chrome, pas de version pour Safari ni Firefox
• Plus lourde que les alternatives: 2 Mo contre 741 Ko pour WhatFont

🔗 Fonts Ninja sur le Chrome Web Store

4. L’inspecteur intégré, méthode universelle sans extension

Lorsque vous ne souhaitez pas installer d’extensions ou que vous travaillez sur un navigateur pour lequel elles n’existent pas, tout navigateur moderne dispose d’un outil intégré pour l’identification des polices. C’est plus lent qu’avec les extensions, mais cela ne nécessite aucune installation.

Google Chrome. Faites un clic droit sur le texte et choisissez «Inspecter». Le panneau des outils de développement s’ouvre. Dans l’onglet Styles, trouvez la propriété font-family, elle liste toutes les polices appliquées à l’élément. La première de la liste est celle qui s’affiche actuellement.

Firefox. Firefox dispose d’un onglet «Polices» dédié dans l’inspecteur. Clic droit → «Inspecter l’élément» → allez dans l’onglet Polices. Vous verrez non seulement le nom de la police mais aussi sa graisse, sa taille et même un aperçu des glyphes, ce qu’aucune extension ne propose.

Safari. Activez d’abord le menu «Développement»: Safari → Préférences → Avancées → cochez «Afficher le menu Développement dans la barre des menus». Faites maintenant un clic droit sur le texte → «Inspecter l’élément». Dans la barre latérale, choisissez «Styles, calculés» et trouvez la section font-family.

Avantages:

• Rien à installer, intégré à chaque navigateur
• Firefox affiche un aperçu des glyphes dans l’onglet Polices
• Fonctionne pour tout élément, pas seulement le texte

Inconvénients:

• Plus lent que les extensions: 10 à 30 secondes contre un résultat instantané
• Peu pratique pour une consultation massive des polices sur une page

5. What Can My Font Do?, décoder les polices renommées

Un obstacle sérieux pour toutes les extensions et l’inspecteur est une police renommée. Lorsqu’un développeur assemble un package personnalisé, le nom font-family perd le lien avec l’original: au lieu de Inter ou Roboto, vous voyez quelque chose comme custom-font-3742. Les extensions sont impuissantes, elles lisent la propriété CSS, pas le fichier lui-même.

La solution est le service What Can My Font Do?. L’algorithme:

• Via l’inspecteur Chrome, allez dans l’onglet Application → Frames → Polices. Trouvez le fichier de police en faisant correspondre le nom du fichier à ce que vous voyez dans font-family.
• Ouvrez le fichier de police dans un nouvel onglet, il se téléchargera.
• Faites glisser le fichier téléchargé dans la fenêtre de What Can My Font Do?. Le service analysera les données binaires et affichera: le vrai nom de la police, la fonderie, le nombre de glyphes, la prise en charge linguistique, la licence et tous les caractères sous forme de tableau.

Ce n’est pas une méthode instantanée, elle demande une minute ou deux et une compréhension de base des outils de développement. Mais lorsque les extensions échouent face à une police renommée ou assemblée sur mesure, What Can My Font Do? est la seule méthode qui fonctionne.

Avantages:

• Identifie les polices renommées grâce à l’analyse du fichier binaire
• Affiche des informations complètes: glyphes, langues, licence
• Service web gratuit, sans installation requise

Inconvénients:

• Lent: une à deux minutes par police
• Nécessite de comprendre l’onglet Application des outils de développement

Vidéo: comment identifier une police en une minute

Regardez un tutoriel pas à pas des cinq méthodes en action, des extensions à l’inspecteur:

⁉️🤔 Foire aux questions

Les extensions de polices sont-elles sûres? Ne collectent-elles pas de données?

WhatFont, Fontanello et Fonts Ninja ne collectent pas de données personnelles et ne transmettent pas d’informations sur les sites visités. Sur la fiche du Chrome Web Store pour WhatFont, le développeur indique explicitement: l’extension ne collecte ni n’utilise les données des utilisateurs. Fonts Ninja demande plus d’autorisations, mais cela est nécessaire au fonctionnement de la fonction de favoris de polices.

Peut-on connaître une police commerciale et le prix de sa licence?

Fonts Ninja est la seule extension de la liste qui affiche le prix de la licence directement au survol du texte. Pour les projets commerciaux, cela fait gagner des heures: plus besoin de chercher la police séparément sur MyFonts ou Adobe Fonts pour en connaître le coût.

Que faire si la police est identifiée mais ne peut pas être téléchargée?

Les polices sur les sites web sont presque toujours protégées par le droit d’auteur. Connaître le nom est légal. Télécharger et utiliser sans licence ne l’est pas. Si la police est commerciale (par exemple, du catalogue Linotype ou Monotype), achetez une licence sur le site de la fonderie. Les polices gratuites sont le plus souvent hébergées sur Google Fonts, elles peuvent être utilisées librement dans tout projet.

Pourquoi Firefox affiche-t-il la police mais pas Chrome?

Cela se produit lorsqu’une police est connectée via @font-face avec différents formats: WOFF2 pour Chrome, WOFF pour les anciennes versions de Firefox. Si la police ne s’affiche pas dans Chrome, vérifiez la console des outils de développement dans l’onglet Console: peut-être que le fichier de police est bloqué par la politique CORS ou n’a pas été chargé à cause d’un bloqueur de publicité.

Quelle méthode un développeur frontend devrait-il choisir, et laquelle pour un designer?

Pour un développeur frontend, l’inspecteur intégré est plus pratique, il est déjà ouvert dans le flux de travail, pas besoin de changer d’outil. Pour un designer, Fonts Ninja: elle affiche le prix, les alternatives et permet de mettre en favoris les trouvailles pour de futurs projets. Pour des vérifications ponctuelles du type «quelle est cette police?», prenez Fontanello, un clic et la réponse est juste devant vous.

Quel outil d’identification de police choisir?

Le meilleur choix dépend de la tâche. Si vous êtes développeur frontend et que l’inspecteur est déjà ouvert, restez-y, l’onglet Polices de Firefox vous donnera plus d’informations que n’importe quelle extension. Si vous êtes designer en quête de références, installez Fonts Ninja pour les favoris, les prix et les polices similaires. Pour des vérifications rapides, Fontanello est le roi de la vitesse: clic droit et c’est fait.

Et quand aucune extension ne peut gérer la situation, police renommée, assemblage personnalisé, package maison, téléversez le fichier sur le service d’analyse de polices What Can My Font Do?. C’est le dernier recours qui fonctionne toujours.