Comment savoir quelle police est utilisée sur un site web ?

Sur un site web, la police d’écriture n’est jamais un détail décoratif. Elle façonne l’ambiance, crédibilise une marque, guide la lecture et peut, à elle seule, donner envie de rester ou de fermer l’onglet. Quand on tombe sur une typo qui claque, la tentation est immédiate : « Comment identifier cette font pour l’utiliser à mon tour, sans bricolage ni copie sauvage ? ». Bonne nouvelle, il existe aujourd’hui une palette d’outils, de réflexes et de méthodes pour remonter à la source d’une police, qu’elle soit dans du texte HTML tout simple, planquée dans une image ou intégrée dans un thème WordPress capricieux.

Derrière cette curiosité se cache un enjeu très concret pour ton propre projet numérique. Comprendre comment repérer et analyser une police permet de bâtir une identité typographique cohérente, de ne pas tomber dans les pièges des polices illisibles, et d’éviter les erreurs de licences qui peuvent coûter cher. Que tu travailles sur un site vitrine, un e‑commerce ou un simple portfolio, savoir lire ce que racontent les polices des autres sites, et comment elles sont mises en place dans le CSS, t’aide à prendre de meilleures décisions pour ta marque. L’idée n’est pas de copier-coller, mais de comprendre, décoder, et ensuite choisir en connaissance de cause.

En bref

• Pour identifier une police sur un site web, le combo le plus fiable reste l’inspecteur d’éléments du navigateur + une extension dédiée comme WhatFont ou Font Ninja.
• Les textes intégrés dans des images se décodent avec un outil en ligne du type WhatTheFont ou Fontspring Matcherator, en soignant la qualité de la capture.
• Sur WordPress, la typographie peut venir du thème, d’un constructeur de page ou d’un plugin : il faut cartographier les sources pour ne pas se perdre.
• Avant de réutiliser une font, il faut toujours vérifier sa licence (gratuite, commerciale, limitée) pour rester dans les clous.
• Une bonne stratégie de polices repose sur peu de familles, bien hiérarchisées, couplées à Google Fonts, Adobe Fonts ou des polices auto‑hébergées.

Comment savoir immédiatement quelle police utilise un site web avec ton navigateur

La méthode la plus directe pour identifier une police d’écriture sur un site web ne passe ni par un plugin magique ni par un service externe. Elle est déjà sous ton curseur, dans tous les navigateurs modernes, via l’inspecteur d’éléments. C’est l’outil que les intégrateurs ouvrent en réflexe, et il te donne une vision brute de la font utilisée, de sa taille, de son poids, et même de la manière dont elle est chargée.

Imagine Léa, graphiste freelance qui tombe sur une landing page ultra lisible. Elle fait un clic droit sur un titre, choisit « Inspecter » et voit s’ouvrir le panneau latéral rempli de HTML et de CSS. Dans l’onglet Styles ou Calculé, elle scrolle jusqu’à la propriété font-family. Là, elle repère une liste du type : « DM Sans », -apple-system, BlinkMacSystemFont, « Segoe UI », sans-serif. La première de la pile, DM Sans, est la police choisie par le designer ; le reste sert de plan B si la première ne se charge pas.

Ce concept de pile de polices est essentiel. Une font‑family est rarement un seul nom isolé. C’est souvent une chaîne de polices séparées par des virgules qui sert à garantir un rendu correct, même en cas de blocage de ressource ou de restriction de chargement. Pour toi, cela veut dire qu’il faut regarder en priorité la première police personnalisée de la liste, pas le dernier « sans-serif » générique qui ne renseigne pas grand‑chose.

Sur Chrome, Firefox ou Edge, le réflexe est le même : clic droit sur le texte, « Inspecter », puis repérage de la règle CSS qui s’applique vraiment à l’élément (et pas à son parent, ni à une règle écrasée). Sur Safari, une étape supplémentaire consiste parfois à activer le menu Développement dans les réglages avant d’accéder à l’inspecteur. Une fois ce point réglé, la logique reste identique.

Parfois, tu tomberas sur une valeur de font-family qui ressemble à un nom de variable bizarre, type « var(–heading-font) ». Dans ce cas, pas de panique. Il suffit de remonter dans le panneau Styles pour retrouver où cette variable est déclarée, souvent sur le body ou le html, ou dans un fichier CSS global lié au thème. En deux ou trois clics, on remonte la trace de la vraie police utilisée.

Un point que beaucoup négligent consiste à vérifier comment la police est réellement chargée. Toujours dans l’inspecteur, onglet Réseau, un filtrage sur « font » montre les fichiers .woff, .woff2, .ttf ou .otf qui transitent. Tu visualises alors le chemin (par exemple un lien vers Google Fonts ou un serveur maison), la taille des fichiers et le temps de chargement. C’est une mine d’informations si tu réfléchis aussi performance et non seulement esthétique.

Dernier cas de figure courant : la police que tu vois à l’écran ne correspond pas à celle annoncée dans le CSS, parce que ton navigateur la remplace par une alternative de la pile. Cela arrive quand la font personnalisée ne se charge pas, ou quand un bloqueur la filtre. Dans ce cas, un test sur un autre navigateur, ou en navigation privée sans extensions, aide souvent à confirmer si le problème vient de là. La bonne habitude, pour un site sérieux, reste d’avoir une pile propre et cohérente, avec des polices de secours proches visuellement de la principale. Le confort de lecture se joue aussi dans ces détails.

Extensions de navigateur pour identifier une police sans toucher au code

Tout le monde n’a pas envie de fouiller dans le CSS à chaque fois qu’une typo attire l’œil. C’est exactement pour ça que des extensions de navigateur ont émergé et sont devenues des compagnons quotidiens pour beaucoup de designers. Elles ajoutent un bouton dans la barre d’outils : tu cliques, tu survoles le texte, et l’extension t’affiche le nom de la police d’écriture, sa taille, son poids, parfois même la couleur et la hauteur de ligne.

WhatFont est probablement celle que l’on croise le plus souvent dans les barres d’outils des créatifs. Une fois installée sur Chrome, Firefox ou Safari, elle transforme ton curseur en détecteur de font. Tu passes sur un titre : une petite bulle affiche le nom de la police, 36 px, bold. Tu descends sur un paragraphe : autre bulle, autre font ou même famille, mais en regular à 16 px. En quelques secondes, tu comprends la structure typographique globale du site web que tu analyses.

Fontanello pousse un peu plus loin en ajoutant un mini panneau d’infos détaillées quand tu fais un clic droit sur le texte. Outre la famille de polices, tu récupères la taille réelle en pixels, le line-height, parfois le letter-spacing. Ces micro-détails intéressent tout particulièrement ceux qui veulent reconstruire une grille typographique solide dans leurs propres maquettes, plutôt que de tout faire à l’œil.

Font Ninja, quant à lui, vise vraiment les designers qui cherchent à acheter ou à tester des polices. L’extension ne se contente pas de reconnaître la font, elle essaie aussi de te proposer un lien pour l’obtenir, voire de la tester en live avec ton propre texte. Pour quelqu’un qui construit une identité de marque, c’est très pratique : tu peux vérifier en situation si une typographie colle à ta tonalité avant même de l’installer dans Figma.

Pour y voir plus clair, voici un rapide comparatif des grandes familles d’extensions utiles quand tu veux identifier une police sur le web :

Ces outils ont un énorme avantage : ils t’évitent de parcourir un CSS surchargé, surtout sur des sites construits avec plusieurs layers de frameworks, de correctifs et de thèmes. Tu gagnes du temps, tu réduis le risque de te tromper de règle, et tu peux même faire ce travail devant ton client pour lui expliquer en direct ce que son site actuel raconte en termes de typographie.

Il y a tout de même deux limites à avoir en tête. D’abord, ces extensions peuvent se tromper sur des cas complexes, par exemple quand un site applique plusieurs polices sur un même bloc via des spans, ou quand des classes dynamiques ajoutent des styles en JavaScript. Dans ces rares cas, l’inspecteur d’éléments reste l’arbitre final. Ensuite, une extension ne résout pas la question de la licence : savoir que la police s’appelle telle chose ne signifie pas que tu as le droit de l’utiliser gratuitement.

La bonne approche consiste souvent à combiner les deux outils : extension pour une vue d’ensemble rapide, puis vérification au cas par cas dans le CSS pour les éléments clés (titres, boutons, textes de formulaire). Une fois cette cartographie faite, tu peux décider en connaissance de cause si tu alignes ta propre typographie sur ces choix, ou si tu prends une direction volontairement différente. L’essentiel est de ne plus être dans le flou.

Identifier une police d’écriture dans une image, un logo ou un PDF

La réalité, c’est que beaucoup de polices qui nous tapent dans l’œil ne se trouvent pas dans du texte HTML, mais dans des visuels : logos, bannières, visuels de campagne, PDF commerciaux. Pour ces cas-là, l’inspecteur ne t’aidera pas. Ce qu’il te faut, c’est un outil en ligne spécialisé capable d’analyser une image et de la comparer à une base gigantesque de polices existantes.

WhatTheFont, développé par MyFonts, fait partie des vétérans du genre. Tu prends une capture d’écran du logo ou du texte qui t’intéresse, tu la recadres proprement pour ne garder que les lettres pertinentes, puis tu envoies tout ça sur le site. Le moteur détecte les caractères, te propose de corriger si besoin, puis affiche une liste de polices proches, classées par ressemblance. Quand le texte est net et horizontal, les résultats sont souvent bluffants.

Fontspring Matcherator adopte un fonctionnement proche, mais offre quelques réglages supplémentaires pour les cas plus compliqués. Par exemple, tu peux affiner la zone de sélection, préciser certaines lettres, ou gérer un fond plus chargé. Sur des typos un peu moins propres, ou sur des images issues de réseaux sociaux compressées à outrance, cette marge de manœuvre peut faire la différence.

Autre option utile : WhatFontIs, qui demande parfois un peu plus de travail manuel, notamment sur les polices script ou les lettres collées. En revanche, son algorithme est moins perturbé par un texte non parfaitement horizontal ou un fond granuleux. Quand WhatTheFont patine, il n’est pas rare que WhatFontIs s’en sorte mieux. D’où l’intérêt de ne jamais te bloquer sur un seul service.

Pour maximiser tes chances d’identifier une font à partir d’une image, quelques règles simples s’imposent. Il faut une bonne résolution, un contraste suffisant entre le texte et le fond, et idéalement au moins un mot complet plutôt qu’une seule lettre isolée. Plus l’outil a d’informations, plus il peut comparer précisément sa forme aux milliers de polices de sa base. Dans certains cas, tu n’auras pas de match exact, mais une liste de polices visuellement proches, largement suffisantes pour ton projet.

Quand les outils automatiques échouent, la carte « communauté » peut sauver la mise. Le forum de DaFont, par exemple, rassemble une armée de passionnés capables de reconnaître des polices quasi à vue. Tu postes ton image, tu expliques le contexte, et tu attends les réponses. Ce n’est pas instantané, mais sur des polices anciennes ou très particulières, l’œil humain bat encore certains algorithmes.

Pour les PDF, la démarche est différente. Si le texte est conservé comme texte et non aplati dans une image, un simple passage par Acrobat Reader suffit. Menu Fichier, Propriétés, onglet Polices : tu obtiens la liste complète des polices embarquées dans le document. Tu vois rapidement s’il s’agit de familles courantes (parfois issues de Google Fonts) ou de polices commerciales embarquées partiellement. Quand la liste est longue, cela trahit souvent un manque de rigueur dans la conception du document.

Une fois la police identifiée, reste une question terre-à-terre : comment te la procurer sans piratage ni bricolage douteux ? Si c’est une police gratuite, un passage par Google Fonts, Font Squirrel ou le site de la fonderie suffit. Pour une police commerciale, tu peux passer par MyFonts, Fontspring ou le site de l’éditeur. Les plateformes type Envato Elements proposent aussi des catalogues énormes avec licence commerciale incluse, via un abonnement. L’avis tranché à ce sujet est simple : économiser quelques dizaines d’euros en utilisant une police sans licence sur un projet pro n’a aucun sens. Le risque juridique est réel, et l’image de la marque en prend un coup si le sujet ressort.

Quand les thèmes, plugins et constructeurs brouillent les pistes de la typographie

Sur un WordPress moderne, la typographie n’est presque jamais gérée à un seul endroit. Entre le thème, un constructeur de page comme Elementor ou Divi, les plugins de formulaires et parfois même le builder natif, la même page peut se retrouver avec trois ou quatre sources de styles de polices différentes. C’est là que beaucoup de sites dérivent vers un joyeux patchwork de fonts sans cohérence.

Reprenons Léa, qui reprend le site d’une petite marque de prêt‑à‑porter. En front, elle voit au moins trois styles différents de texte. Elle commence par aller dans Apparence > Personnaliser, puis cherche une rubrique « Typographie » ou « Polices ». Le thème propose des choix globaux pour les titres et le corps du texte, souvent basés sur Google Fonts. Elle choisit une famille claire pour les paragraphes, une autre pour les titres, et applique. Sur le blog, tout s’harmonise. Sauf que sur la page d’accueil, rien ne bouge.

C’est là que la compréhension des sources de styles devient stratégique. Cette page d’accueil a été construite entièrement avec un builder visuel, qui applique ses propres réglages locaux de police d’écriture. Dans Elementor, par exemple, chaque widget texte ou titre possède un onglet Style avec des options de typographie. Si quelqu’un a fixé manuellement « Roboto » sur ces blocs, changer la font globale du thème ne fera rien. Il faut alors soit remettre ces éléments en « Par défaut », soit définir une typographie globale directement dans les réglages du builder.

Elementor offre justement un panneau « Paramètres du site » où tu peux définir des styles globaux pour les titres (H1 à H6) et le texte courant. Bien utilisés, ces réglages deviennent ta source de vérité. Tu évites les réglages au cas par cas qui finissent par transformer le site en patchwork. À l’inverse, multiplier les exceptions locales, c’est la garantie d’un enfer de maintenance quand il faudra faire évoluer la charte.

Les plugins ne sont pas en reste. Un plugin de formulaire qui te permet de choisir sa propre font, un carrousel d’avis clients qui embarque ses polices, un plugin de newsletter qui injecte son CSS… Chacun peut ramener sa petite couche typographique. L’inspecteur d’éléments redevient alors ton meilleur allié pour savoir d’où vient vraiment la police d’un bloc précis. Souvent, une simple surcharge dans le fichier CSS enfant du thème suffit à remettre de l’ordre, à condition de savoir ce que tu veux imposer.

Un point trop rarement abordé est l’impact de ces multiples chargements sur la performance. Charger quatre familles complètes issues de Google Fonts, chacune avec plusieurs graisses, peut ajouter plusieurs centaines de kilo‑octets à chaque page. Sur mobile, en 4G moyenne, cela se ressent vite. La recommandation est claire : limiter le nombre de familles, réduire les graisses réellement utilisées, et envisager l’auto‑hébergement ou un système de sous‑ensemble (subset) pour optimiser le temps de chargement.

Pour t’aider à auditer rapidement un site sous WordPress ou un autre CMS, voici une petite liste de contrôle à garder sous le coude :

• Repérer la ou les familles utilisées pour les titres et le corps avec une extension type WhatFont.
• Vérifier dans le CSS si ces polices viennent du thème, d’un builder ou d’un plugin spécifique.
• Compter le nombre de familles et de variantes (light, regular, bold, etc.) réellement chargées.
• Décider d’une hiérarchie claire avec 1 police de texte et 1 de titrage, plus éventuellement une d’accent.
• Centraliser au maximum les réglages globaux pour éviter les exceptions locales dispersées.

Un site qui respire la maîtrise typographique ne se reconnaît pas seulement à la beauté de sa police. Il se repère surtout à sa cohérence. Même corps de texte sur toutes les pages, même hiérarchie de titres, même logique de contrastes. Quand tout cela est tenu, le visiteur ne se dit pas « quelle belle typo », il lit, comprend et fait ce que tu attends de lui. C’est précisément le but.

Formats de fichiers, licences et bonnes pratiques pour réutiliser une font sans se brûler

Identifier une police d’écriture, c’est une chose. L’utiliser proprement sur ton propre site web, c’en est une autre. Cette deuxième étape oblige à mettre le nez dans les formats de fichiers, les licences, et quelques enjeux techniques que beaucoup aimeraient ignorer. Sauf que faire l’autruche sur ces points finit presque toujours par se retourner contre le projet.

Côté formats, quatre types reviennent tout le temps quand tu fouilles dans le CSS ou dans les ressources réseau d’un site : WOFF, WOFF2, TTF et OTF. TTF et OTF sont des formats « historiques », très répandus sur desktop, utiles pour installer une police sur ta machine pour Photoshop, Illustrator ou Figma. Pour le web, WOFF et surtout WOFF2 sont à privilégier, car compressés et mieux gérés par les navigateurs récents. Un site qui n’expose que des TTF ou OTF pour le front se prive souvent d’optimisations de poids intéressantes.

Sur le plan légal, trois grands cas se détachent. D’abord, les polices libres d’utilisation, comme la plupart de celles présentes sur Google Fonts ou Font Squirrel, qui autorisent un usage commercial à condition de respecter la licence (souvent une licence OFL ou Apache). Ensuite, les polices commerciales, à acheter auprès d’une fonderie ou d’une marketplace, avec parfois des licences distinctes pour le print, le web, l’app, etc. Enfin, les polices « gratuites pour usage personnel », qui ne peuvent pas être utilisées sur un site professionnel sans accord explicite ou licence payante.

Le réflexe à garder est simple : dès que tu identifies une font qui t’intéresse, tu vas chercher sa fiche officielle chez l’éditeur ou sur un site fiable. Tu vérifies la section licence, les conditions de webfont, et tu regardes si une intégration par CSS via @font-face ou via un service en ligne comme Adobe Fonts est prévue. Tu bannis les téléchargements de fichiers douteux trouvés au détour d’un forum qui ne citent aucune source claire. Ce n’est pas qu’une question d’éthique : c’est aussi une question de sécurité technique.

Autre sujet chaud : la façon de charger les polices sur le site. Beaucoup de designers se contentent d’embarquer un lien vers Google Fonts dans le head et s’arrêtent là. Pour des projets courants, cela reste acceptable, surtout en activant des options comme le display=swap pour éviter les effets de texte invisible au chargement. Pour des marques avec un enjeu fort sur la performance, l’auto‑hébergement de la police, avec un sous‑ensemble réduit aux caractères réellement utilisés (latin, sans accents inutiles, par exemple) peut faire gagner de précieuses millisecondes.

La manière dont tu relies la police à tes styles compte aussi. Déclarer proprement quelques classes et styles globaux pour les titres, les sous‑titres, les textes de corps, les boutons, plutôt que d’appeler la font à tout-va en ligne, te garantit une maintenance plus saine. D’ailleurs, repérer dans le CSS d’un site concurrent comment la font est assignée t’inspire souvent des structures plus propres pour ton propre code.

Enfin, il faut parler accessibilité. Une typo ultra fine en 14 px gris clair peut avoir l’air minimaliste sur un grand écran calibré, mais elle devient illisible pour une part non négligeable de ton audience. Les critères de contraste, la taille minimale de corps, la hauteur de ligne et la distinction claire entre majuscules et minuscules ne sont pas négociables si tu veux que ton message soit lu par tous. Une police élégante qui sacrifie la lisibilité ne sert ni la marque, ni l’utilisateur.

En résumé, une bonne gestion des fonts repose sur un trio simple : formats adaptés au web, licences carrées, et styles pensés pour être à la fois beaux et lisibles. C’est rarement ce qu’on voit sur les sites bricolés, et précisément ce qui distingue un projet travaillé d’un assemblage vite fait.

Comment identifier rapidement la police d’écriture d’un site web sans toucher au code ?

Le plus simple est d’installer une extension de navigateur dédiée comme WhatFont, Fontanello ou Font Ninja. Tu actives l’outil, tu survoles le texte qui t’intéresse, et une bulle t’affiche le nom de la police, sa taille et son poids. Pour confirmer, tu peux ensuite ouvrir l’inspecteur d’éléments du navigateur et vérifier la propriété font-family dans le CSS, ce qui te donne la pile complète de polices utilisée.

Comment retrouver une police utilisée dans un logo ou une image ?

Quand la police est intégrée dans une image, il faut passer par un outil en ligne de reconnaissance typographique comme WhatTheFont, Fontspring Matcherator ou WhatFontIs. Tu prépares une image nette et contrastée du texte, tu la télécharges sur l’outil, puis tu laisses l’algorithme comparer avec sa base de données. Si l’outil ne trouve pas de match exact, il propose souvent des polices visuellement proches. En dernier recours, des forums spécialisés comme celui de DaFont permettent de demander l’avis de passionnés.

Comment savoir si j’ai le droit d’utiliser une font repérée sur un autre site ?

Identifier le nom de la police ne suffit pas à valider son usage. Il faut retrouver sa fiche officielle auprès de la fonderie ou d’une plateforme fiable comme Google Fonts, MyFonts, Fontspring ou Envato. La section licence indique si la police est gratuite pour un usage commercial, réservée à un usage personnel, ou payante. Pour un site professionnel, mieux vaut toujours se procurer une licence web adaptée ou choisir une alternative libre plutôt que d’extraire les fichiers d’un site existant.

Pourquoi mon site affiche-t-il une police différente de celle indiquée dans le CSS ?

La propriété font-family définit une pile de polices, pas une seule. Si la police principale ne se charge pas (ressource bloquée, erreur de chemin, problème de licence, bloqueur de contenus), le navigateur passe à la suivante de la liste, souvent une police système générique. Tu peux vérifier cela dans l’onglet Réseau de l’inspecteur, en filtrant sur les ressources de type font. Si les fichiers ne se chargent pas, il faut corriger le chemin, la méthode d’intégration ou la configuration de ton CDN.

Combien de polices d’écriture utiliser sur un même site web ?

Pour un site lisible et cohérent, deux familles de polices suffisent largement dans la plupart des cas : une pour les titres et une pour le corps du texte. Une troisième police d’accent peut éventuellement servir pour des éléments très spécifiques (chiffres, citations, branding), mais au‑delà, le design perd rapidement en unité et le poids des ressources augmente. Mieux vaut jouer sur les graisses, les tailles et la hiérarchie que multiplier les fonts sans raison.