Une police de caractères, ce n’est pas juste «de jolies lettres». Elle capte l’attention, donne le ton et influence directement la lisibilité. Une mauvaise police peut faire fuir un visiteur en quelques secondes, même si le contenu est excellent.

Il vous arrive parfois de tomber sur un site et de trouver que le texte a l’air haut de gamme et élégant. Vous aimeriez savoir quelle police est utilisée, pour un projet personnel ou simplement par curiosité professionnelle. Mais les propriétaires de sites n’étiquettent pas leur typographie, et certains renomment même volontairement les polices dans le CSS pour compliquer leur identification.

Bonne nouvelle: identifier une police sur n’importe quel site est tout à fait possible. Vous n’avez pas besoin d’être développeur front-end ni designer; trois approches couvrent pratiquement tous les cas de figure. De l’inspecteur intégré du navigateur aux extensions en un clic, en passant par les services dédiés aux polices présentes dans des images.

💡 Aperçu rapide:

• Ouvrez les DevTools (F12) et cherchez font-family dans l’onglet Computed

• Installez Whatfont ou Fontanello et survolez le texte

• Téléversez une capture d’écran sur Font Squirrel Matcherator ou WhatTheFont

1. Inspecteur intégré du navigateur

La méthode la plus accessible, qui ne nécessite aucune installation. Tous les navigateurs modernes (Chrome, Firefox, Edge, Safari) intègrent des outils de développement (DevTools). Parmi eux figure un inspecteur qui affiche les propriétés CSS de n’importe quel élément de la page, y compris la police.

Comment l’ouvrir. Sous Windows, appuyez sur Ctrl + Shift + I; sous Mac, sur Cmd + Shift + I. Vous pouvez aussi faire un clic droit sur le texte et sélectionner «Inspecter» ou «Examiner l’élément». Le panneau des DevTools s’ouvre alors.

Sur la partie gauche du panneau, vous voyez la structure HTML; sur la droite, les règles CSS. Mais le chemin le plus rapide vers la police passe par l’onglet Computed. Faites défiler la liste des propriétés jusqu’à font-family; c’est le nom de la police. À côté, le navigateur indique le fichier de police spécifique qui est affiché sur la page.

Il existe aussi une autre voie pour ceux qui souhaitent voir toutes les polices du site d’un seul coup. Dans les Chrome DevTools, ouvrez l’onglet Application → section Frames → dossier Fonts. Le navigateur affiche la liste de tous les fichiers de police chargés, avec leur URL et leur format (woff2, ttf). C’est plus lent, mais cela révèle ce qui est caché dans @font-face.

Avantages: gratuit, ne nécessite aucune extension, indique le nom exact de la police et son style (graisse, style, corps). Inconvénients: demande plusieurs clics; la méthode ne fonctionne pas sur les appareils mobiles.

2. Extensions de navigateur

Si vous vérifiez fréquemment des polices, une extension vous fera gagner des heures. Le principe est simple: vous survolez un texte, et l’extension affiche le nom de la police et ses paramètres CSS dans une infobulle.

2.1 Whatfont

La solution la plus répandue dans ce domaine. Recommandée par Wired, Lifehacker et SwissMiss. L’installation depuis le Chrome Web Store se fait en un clic.

Après l’installation, cliquez sur l’icône de l’extension dans le coin supérieur droit du navigateur pour activer le mode de détection. Désormais, lorsque vous survolez un texte, Whatfont affiche la police directement au-dessus du curseur. Un clic sur le texte fait apparaître la fiche complète: famille, graisse, corps, interlignage et couleur.

L’extension fonctionne également sur Firefox et Safari (via un portage). Gratuite, sans inscription, open source sur GitHub.

🔗 Whatfont sur le Chrome Web Store

2.2 Fontanello

Alors que Whatfont affiche les informations au survol, Fontanello fonctionne via un clic droit. Sélectionnez un texte sur un site, appuyez sur le bouton droit de la souris et choisissez Fontanello dans le menu contextuel. Un panneau apparaît avec toutes les informations: nom de la police, graisse, taille, couleur et même le rapport de contraste du texte par rapport à l’arrière-plan (un critère d’accessibilité).

Fontanello est disponible pour Chrome et Firefox. Un avantage supplémentaire: l’extension n’alourdit pas la page avec un suivi constant; elle s’active uniquement lorsque vous la sollicitez.

🔗 Fontanello sur le Chrome Web Store

2.3 Fonts Ninja

Un outil plus puissant doté d’une fonction «ADN de police»: un algorithme propriétaire qui analyse les fichiers de caractères pour des résultats plus précis. Au-delà de l’identification des polices au survol, Fonts Ninja permet de mettre en favoris les polices trouvées et d’afficher un résumé de toutes les polices utilisées sur une page.

Il y a un bémol: les favoris et certaines fonctionnalités nécessitent une inscription. Mais l’identification de base des polices fonctionne sans compte. L’extension est payante (avec une période d’essai), elle mérite donc réflexion si vous travaillez avec la typographie à titre professionnel.

🔗 Fonts Ninja sur le Chrome Web Store

3. Comment identifier une police à partir d’une image

L’inspecteur et les extensions sont impuissants lorsque la police fait partie d’une image: un logo, une bannière ou un mème. Le texte dans une image n’est pas un élément HTML, ce qui signifie qu’il n’a pas de propriétés CSS. Des services spécialisés existent pour ces cas-là.

3.1 Font Squirrel Matcherator

Un outil gratuit de Font Squirrel, éprouvé depuis des années. Voici comment il fonctionne:

• Téléchargez une capture d’écran ou un fragment de texte dans l’interface du Matcherator
• Sélectionnez la zone contenant les lettres (marqueur bleu dans la barre d’outils)
• Cliquez sur «Matcherate It!»

Le service analyse la forme des caractères et renvoie une liste des correspondances les plus proches issues de sa base de données. S’il n’y a pas de correspondance exacte, il suggère des alternatives visuellement similaires avec un pourcentage de similarité. Cela fonctionne même avec les polices manuscrites, tant que les lettres ne se touchent pas.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont par MyFonts

WhatTheFont utilise le deep learning et une base de données de plus de 233 000 polices. Téléchargez une image, cliquez sur la lettre souhaitée et l’algorithme trouve les correspondances. Son principal avantage par rapport à Matcherator: WhatTheFont gère les scripts liés où les lettres s’enchaînent les unes aux autres. Il s’agit d’une capacité technique sérieuse que les services plus anciens n’ont pas.

Pour un résultat optimal, téléchargez un texte horizontal avec une bonne résolution sur un fond contrasté.

🔗 WhatTheFont sur MyFonts

Vidéo: identifier une police en une minute

Une courte démonstration montrant comment installer l’extension Identify Font et trouver une police sur n’importe quel site sans ouvrir les DevTools:

⁉️🤔 Foire aux questions

Peut-on identifier une police sur un site mobile?

Oui, mais avec des limites. Les extensions ne sont pas disponibles sur les navigateurs mobiles, et les DevTools non plus. La méthode qui fonctionne: faites une capture d'écran du texte sur votre téléphone et importez-la sur WhatTheFont ou Font Squirrel Matcherator via un ordinateur. Si le texte sur le site est suffisamment grand et net, le service reconnaîtra la police à partir de la capture d'écran avec la même efficacité qu'à partir d'une image sur ordinateur.

Que faire si le propriétaire du site a renommé la police dans le CSS?

Certains développeurs modifient la propriété font-family dans les styles avec un nom arbitraire, alors qu'ils chargent en réalité un fichier de police spécifique. Dans ce cas, la méthode via les DevTools, dans l'onglet Application (Frames → Fonts), affichera les véritables URL des fichiers de police. À partir du nom du fichier (par exemple, Inter-Regular.woff2), vous pouvez facilement identifier la police. Les extensions comme Fonts Ninja avec leur «analyse ADN» contournent également ce renommage en analysant le fichier lui-même plutôt que la propriété CSS.

Quelle est la méthode la plus fiable?

Pour du texte sur une page: l'extension Whatfont ou Fontanello; un simple survol et vous obtenez le nom exact. Pour les images: WhatTheFont avec son moteur de réseau neuronal est plus précis que Matcherator pour les polices liées et décoratives. Pour une certitude absolue en cas de CSS renommé: DevTools → Application → Fonts, où vous voyez l'URL réelle du fichier de police; aucune erreur n'est possible ici.

Faut-il payer pour identifier des polices?

Non. Toutes les méthodes mentionnées dans cet article sont gratuites. Les DevTools sont intégrées au navigateur. Whatfont et Fontanello sont des extensions gratuites en open source. Font Squirrel Matcherator est un service web gratuit. WhatTheFont est gratuit (monétisé via la vente de polices, pas via l'identification). Fonts Ninja propose une version payante, mais l'identification de base des polices fonctionne sans paiement.

Peut-on appliquer automatiquement une police découverte sur son propre site?

Techniquement, oui, mais juridiquement, cela dépend de la licence de la police. Vous pouvez identifier la police librement. En revanche, vous ne pouvez l'utiliser sur votre propre site que si la police dispose d'une licence ouverte (SIL Open Font License, Apache 2.0) ou si vous avez acheté une licence commerciale. Google Fonts, Font Squirrel et Adobe Fonts sont des sources sûres avec des conditions d'utilisation claires.

Quelle méthode d'identification de police choisir

Si vous abordez cette question pour la première fois, commencez par les DevTools. C'est gratuit, cela prend 30 secondes et ne nécessite aucune installation. Pour un travail régulier avec la typographie, installez Whatfont: un survol au lieu de quatre clics.

Lorsqu'une police est cachée dans une image, importez une capture d'écran dans WhatTheFont. C'est le service gratuit de recherche par image le plus avancé technologiquement. Et si la police est renommée dans le CSS, accédez au fichier via Application → Fonts dans les DevTools: cette voie révèle la vérité quelles que soient les astuces du développeur.

Rappelez-vous: trouver une police n'est pas difficile. Le plus difficile est de l'appliquer correctement. Vérifiez la licence, testez la lisibilité sur du contenu réel et ne mélangez pas plus de deux polices dans un même projet. Une bonne typographie ne crie pas, elle fonctionne.