whatfont : identifier une police à partir d’une image

Étape 1 : comprendre ce que fait WhatFont (et ce qu’il ne fait pas) pour identifier une police

WhatFont sert à repérer rapidement les polices utilisées sur une page web en survolant le texte (selon l’extension) et en affichant les styles. L’outil n’est pas magique sur des images floues ou des captures d’écran sans contexte. Pour une identification “à partir d’une image”, il faut passer par des alternatives spécialisées.

Premier point à garder en tête : WhatFont inspecte le rendu dans votre navigateur. Il ne “reconnaît” pas une police comme un logiciel de reconnaissance visuelle. Résultat : si votre source est une photo, une affiche, ou une capture compressée, vous risquez d’obtenir des équivalents plutôt que la police exacte.

Deuxième point terrain : les polices très proches peuvent piéger l’outil. Entre deux graisses quasi identiques, le navigateur peut aussi déclencher un fallback (une police de remplacement) si la ressource ne charge pas. Dans ce cas, l’inspection renvoie la police réellement rendue — pas celle “prévue” côté design.

Troisième nuance : le rendu dépend parfois du chargement. Sur des pages dynamiques, la police peut changer après actualisation (chargement différé, scripts, polices bloquées par CORS). Entre 2025 et 2026, la plupart des outils “image” affichent des scores de confiance et des correspondances proches plutôt que des certitudes.

Piège courant en France : vouloir identifier une police à partir d’une capture d’écran avec WhatFont. Vous gagnez du temps sur le papier, mais vous perdez en précision dans vos conditions réelles de terrain.

Micro-question : votre source, c’est un site à inspecter ou une image à analyser ? Si c’est un site, on passe à l’installation et à l’inspection. Si c’est une image, préparez l’étape suivante.

• Clarifiez la source : site (inspection) ou image (font finder).
• Attendez-vous à des équivalents si l’image est floue ou compressée.
• Sur pages dynamiques, actualisez avant de conclure.

Étape 2 : installer WhatFont sur Chrome/Firefox et l’utiliser pour repérer la police sur un site

Pour identifier une police sur un site, installez l’extension WhatFont depuis la boutique de votre navigateur. Ouvrez la page concernée, survolez le texte, puis lisez le nom de la police et les styles (graisse, taille, variantes). Si le texte est rendu via CSS complexe, regardez aussi les propriétés proches dans l’interface de l’extension.

Action rapide : installez l’extension, puis ouvrez la page cible. Ensuite, activez le mode WhatFont (icône d’extension). L’interface varie selon la version, mais le principe reste le même : vous passez la souris sur le texte et vous lisez les informations affichées.

Contrôle à faire sans se disperser : vérifiez la graisse (normal, bold), l’italique et la taille. Sur beaucoup de sites FR, la police “principale” est cohérente. Par contre, les variantes changent selon les sections (titres, CTA, mentions légales). Si vous ne récupérez que la famille, vous aurez un rendu “presque pareil”.

Regard “CSS” sans vous noyer : les polices sont souvent déclarées via font-family, et le navigateur peut appliquer un fallback si une ressource ne charge pas. Si l’extension vous donne un résultat surprenant, cherchez si le texte est remplacé après chargement (rafraîchissement, changement de thème, cookies, scripts). (Oui, ça arrive plus souvent qu’on ne le pense.)

Astuce terrain : testez plusieurs zones. Un site peut utiliser une police différente pour les encarts, les formulaires ou le footer. Faites au moins 3 survols : un pour un titre, un pour du texte courant, un pour un élément stylisé.

Piège courant en France : conclure sur une seule zone. Vous identifiez la police d’un composant, pas forcément celle de votre cible (landing, article, page service, bannière).

Micro-question avant de passer à l’image : vous avez trouvé la police directement sur le site, ou vous devez travailler à partir d’une capture ? Si vous avez besoin d’une identification “image”, préparez votre fichier et choisissez un outil.

• Survolez 3 zones (titre, texte, élément stylisé) et notez famille + variantes.
• Actualisez si la police change après chargement.
• Validez graisse/italique pour reproduire le rendu.

Étape 3 : identifier une police à partir d’une image avec WhatTheFont, WhatFontIs ou WhatsThatFont

Si vous avez une photo, une capture ou un visuel, utilisez un outil “font finder” basé sur l’image : WhatTheFont, WhatFontIs (Font Finder) ou WhatsThatFont. Importez l’image, ajustez si l’outil le propose, puis comparez les résultats (scores de confiance, variantes). Pour de meilleurs résultats, recadrez sur le texte et améliorez la netteté avant l’envoi.

Choisissez l’outil selon votre contrainte. WhatTheFont couvre large (plusieurs centaines de milliers). WhatsThatFont met en avant des scores de confiance et des liens de téléchargement (selon les résultats). WhatFontIs (Font Finder) vise une couverture “multi-fonderies” et propose des correspondances utiles quand la police n’est pas courante.

Action maintenant : recadrez. Ne chargez pas toute l’affiche. Prenez une zone où les lettres sont distinctes. Si vous pouvez, incluez des caractères qui aident vraiment : a, g, chiffres, majuscules. Une capture “trop large” dilue le signal.

Contrôle qualité image : netteté, contraste, absence de compression. Si votre capture vient d’un PDF, d’un outil de partage, ou d’un outil de capture mobile, refaites une capture plus directe. (Sur le terrain, c’est souvent le facteur n°1.)

Interprétez les résultats avec méthode. Les outils “image” affichent souvent plusieurs candidats. Prenez celui qui colle à la forme des lettres et aux détails (espacement, terminaisons, hauteur de x). Les polices “stylisées” (affiches, logos) donnent fréquemment des correspondances proches plutôt qu’une police exacte.

Piège courant en France : envoyer une image où le texte est partiellement masqué (ombre, reflet, arrière-plan chargé). Vous aurez des “scores”, mais pas la bonne famille.

Micro-question : votre police doit-elle être reproduite à l’identique pour du web (titres, CTA) ou pour un document print ? Si c’est pour du web, préparez l’étape suivante : licence + variantes. Si vous êtes déjà sûr du rendu, passez directement à la récupération.

• Recadrez sur des lettres distinctes (a, g, chiffres, majuscules).
• Choisissez la variante la plus proche en comparant les détails.
• Réessayez avec une zone différente si le score ne vous rassure pas.

Étape 4 : récupérer la police (licence, téléchargement, alternatives) après identification

Une fois la police identifiée, vérifiez la licence avant de l’utiliser : certaines polices sont gratuites pour un usage précis, d’autres demandent une acquisition. Ensuite, cherchez la famille exacte et ses variantes (gras/italique) sur des fonderies ou bibliothèques reconnues. Si la police n’est pas disponible, choisissez une alternative métriquement proche pour conserver l’apparence.

Action : ouvrez la source fiable (fonderie, bibliothèque de polices, documentation de licence). Ne vous basez pas uniquement sur un site qui “ressemble” à la police. Sur la durée, pas au coup par tête : un mauvais choix de licence vous bloque sur le web ou en production.

Contrôle licence : regardez le type d’usage. Pour le web, la licence peut autoriser ou limiter l’usage “desktop uniquement”, l’auto-hébergement, ou l’usage commercial. Pour le print, les conditions peuvent différer. Beaucoup de polices “gratuites” ont des règles (usage personnel, attribution, limites de redistribution).

Récupération technique : retrouvez la famille exacte et les variantes. Les variantes (italique, gras) peuvent être des fichiers séparés. Si vous chargez seulement “Regular”, vous perdrez la cohérence des styles. Pour le web, l’intégration se fait souvent via @font-face ou des services de polices, selon les conditions de licence.

Alternative proche : si la police exacte est introuvable légalement ou techniquement, cherchez une police métriquement proche (hauteur de x, largeur, formes). Le but : garder l’apparence et éviter un rendu “décalé” sur les titres et les CTA.

À vérifier aussi : si vous reproduisez un site, comparez le rendu sur plusieurs tailles. Une police qui “match” à 16px peut diverger sur 40px (titres). C’est là que ça se voit dans vos conditions réelles de terrain.

Micro-question avant l’étape suivante : votre identification est-elle stable (même police sur plusieurs zones) ou avez-vous des incohérences (ex. italique qui change, titres qui “ne matchent pas”) ? Si c’est instable, on traite les cas difficiles.

• Validez la licence selon l’usage (web/print, commercial, hébergement).
• Récupérez famille + variantes (gras/italique) avant de remplacer.
• Préparez une alternative métriquement proche si la police exacte bloque.

Étape 5 : résoudre les cas difficiles (polices proches, fallback, textes en SVG/Canvas)

Quand l’identification ne colle pas, suspectez les polices proches, les fallbacks CSS, ou un rendu non standard (SVG, Canvas, polices masquées par des scripts). Sur un site, inspectez le font-family et comparez avec les styles affichés. Pour une image, augmentez le contraste, recadrez le texte et testez plusieurs zones. Si besoin, combinez inspection web et identification image.

Premier diagnostic : polices proches et variantes. Si WhatFont vous donne une famille, mais que le rendu ne suit pas, vérifiez la graisse et l’italique. Un “bold” simulé par le navigateur peut donner une apparence différente de la vraie graisse fournie par le fichier.

Deuxième diagnostic : fallback CSS. Si la police ne charge pas (réseau, CORS, blocage), le navigateur remplace. Résultat : l’extension affiche la police rendue, pas celle attendue. Pour comprendre la logique côté CSS, appuyez-vous sur la documentation font-family sur MDN et sur @font-face sur MDN.

Troisième diagnostic : SVG et Canvas. Sur certains sites (bannières, visuels, animations), le texte n’est pas du HTML classique. Les outils peuvent alors ne pas exposer la police comme un texte inspectable. Dans ce cas, combinez : inspectez quand c’est possible, sinon revenez à une identification image sur des zones de lettres bien nettes.

Pour l’image : recadrez sur des lettres distinctes. Un “e” flou ne vous aide pas autant qu’un groupe “a g 0 1”. Augmentez le contraste, évitez les arrière-plans chargés, et testez 2 à 3 zones sur la même capture.

Piège courant en France : multiplier les essais sans changer la source. Si vous renvoyez la même capture “moyenne” à différents outils, vous bouclez. Changez le recadrage ou refaites la capture avec plus de netteté.

Micro-question d’alignement : votre objectif est-il la reproduction fidèle (design system) ou une alternative “suffisante” pour un rendu proche ? Selon votre réponse, vous allez soit chercher la police exacte, soit activer une alternative métriquement proche.

• Vérifiez graisse/italique et la cohérence sur plusieurs zones.
• Suspectez fallback si la police change ou si le rendu est “off”.
• Traitez SVG/Canvas avec une double méthode (web + image).

Résultat et prochaines étapes

Vous avez une police identifiée et vous savez comment la reproduire. La suite, c’est la validation “visuelle” sur vos tailles réelles : titres, paragraphes, CTA. Si le rendu ne colle pas, revenez à la variante (gras/italique) ou au fallback. À terme, ce cycle évite les corrections tardives qui coûtent du temps.

Prochaine action recommandée : documentez votre choix. Notez la famille, les variantes utilisées, la licence, et la source du fichier. C’est le genre de détail qui réduit les erreurs quand quelqu’un reprend le projet six semaines plus tard (et oui, ça arrive).

Si votre usage est lié au web, gardez en tête la logique de typographie côté CSS et l’intégration via aperçu CSS W3C. Pour le vocabulaire typographique, vous pouvez aussi vous référer à Typographie sur Wikipédia quand il faut clarifier des termes avec votre équipe.

FAQ

L’essentiel à retenir

• WhatFont sert surtout à repérer une police sur une page via l’inspection du texte rendu.
• Pour une capture ou une photo, privilégiez un outil “font finder” basé sur l’image (WhatTheFont, WhatFontIs, WhatsThatFont).
• Recadrez et améliorez la netteté du texte : c’est le levier n°1 pour augmenter la précision.
• Après identification, vérifiez la licence et récupérez la famille + les variantes (gras/italique) pour reproduire le rendu.
• En cas d’échec, cherchez les fallbacks CSS et les rendus non standards (SVG/Canvas) qui masquent la police réelle.
• Combinez inspection web et identification image pour résoudre les cas difficiles et réduire les faux positifs.
• Gardez une alternative métriquement proche si la police exacte n’est pas disponible légalement ou techniquement.

Et si vous repartez de zéro : commencez par votre source. Ensuite, utilisez whatfont pour l’inspection web, ou basculez sur un font finder pour l’image. Sur la durée, pas au coup par tête : vous gagnerez du temps et vous garderez un rendu cohérent dans vos conditions réelles de terrain.