Trouver la police utilisée sur un site web : 4 méthodes pratiques

Choisissez la bonne façon de trouver une police web

La recherche d’une police utilisée sur une page web peut désigner deux situations. Vous regardez peut-être du texte sélectionnable sur une page en ligne, ou une capture où les lettres font déjà partie d’une image. Commencez par ce tableau :

Commencez par vérifier si le texte du site est actif

Essayez de sélectionner un mot avec la souris ou le clavier. S’il peut être surligné, copié ou recherché, il s’agit probablement de texte HTML actif. Le navigateur connaît alors l’élément, ses styles calculés et la pile de polices choisie par la page.

Si la sélection échoue parce que les mots sont dans une image, un logo, un canvas ou une publicité aplatie, considérez l’échantillon comme une image. Une méthode dédiée au texte actif peut afficher la police du conteneur tout en ignorant la typographie du visuel.

Pensez aussi au responsive. Un titre sur ordinateur peut utiliser une autre famille ou un autre poids sur mobile. Vérifiez l’élément et la largeur qui correspondent au design que vous voulez reproduire.

Utilisez une extension pour le texte d’une page en ligne

Une extension de recherche de police est souvent la solution la plus rapide lorsque vous étudiez un site actif sans avoir besoin d’un audit CSS complet. Elle peut identifier l’élément sous le pointeur et afficher la famille, la taille, le poids et la couleur.

1. Ouvrez la page qui contient la typographie et attendez la fin du chargement.
2. Activez une extension fiable d’inspection des polices, puis placez le pointeur sur le titre, le menu, le bouton ou le paragraphe voulu.
3. Notez la famille et le poids, pas seulement la catégorie générale comme serif ou sans serif.
4. Répétez la vérification sur un second élément. Deux familles différentes peuvent indiquer une vraie association de titres et de texte.

Pour comparer les extensions et leurs limites, consultez le Guide des extensions de recherche de polices. Il explique aussi quand une capture est préférable.

Vérifiez la police avec les DevTools du navigateur

DevTools est préférable lorsque vous avez besoin de preuves pour une refonte, un audit CSS, une vérification d’accessibilité ou une tâche d’implémentation. Vous inspectez l’élément choisi au lieu de dépendre d’une simple étiquette visuelle.

1. Faites un clic droit sur le texte et choisissez Inspecter, ou ouvrez DevTools et utilisez le sélecteur d’élément.
2. Dans Styles ou Computed, trouvez font-family et notez l’ordre complet des polices de secours.
3. Vérifiez font-size, font-weight, line-height, letter-spacing et text-transform, car ces propriétés changent l’apparence.
4. Si le navigateur affiche les polices rendues, comparez-les à la pile déclarée et notez l’éventuel recours à une police de secours.

Pour le flux technique du navigateur, consultez la documentation officielle de Documentation d’inspection CSS de Chrome DevTools.

Trouver une police depuis une capture de site web

Un détecteur de police à partir d’une capture est la bonne solution lorsque vous ne pouvez pas inspecter la page d’origine, lorsque le texte se trouve dans un visuel ou lorsque le design a été partagé comme image aplatie. Il est également utile si la page change avant votre retour.

Recadrez la zone autour d’un seul style. Une ligne nette de titre ou de bouton donne des formes de lettres plus utiles qu’une page entière avec plusieurs familles, des icônes, des photos et de petits libellés.

• Choisir un texte net: Prenez un recadrage suffisamment grand pour comparer des formes répétées comme a, e, g, R et t.
• Garder un seul style: Ne mélangez pas un titre gras et un paragraphe léger si vous cherchez une seule famille.
• Accepter une correspondance probable: Une police personnalisée ou modifiée peut produire une alternative proche plutôt qu’un original certain.

Si vous avez déjà une capture, essayez le Ouvrir Website Font Detector pour comparer les formes visibles et consulter des suggestions similaires.

Erreurs courantes pour identifier une police web

Le nom d’une police ne suffit pas pour reproduire un design. Voici pourquoi deux outils peuvent donner des réponses différentes :

• Polices de secours: Le premier choix déclaré n’est pas forcément celui que le navigateur a rendu.
• Poids variables: Une police variable peut changer selon le poids ou la taille optique utilisés.
• Texte en image: DevTools ne peut pas inspecter des lettres rasterisées dans une bannière, un logo ou un canvas.
• Composants différents: Un système de design peut utiliser une famille pour les titres, une autre pour l’interface et une troisième dans les visuels.
• Licences: Identifier une police ne donne pas le droit de la télécharger ou de l’utiliser commercialement. Vérifiez toujours ses conditions.

Lorsque la précision compte, gardez une courte preuve : URL ou capture, élément inspecté, famille déclarée, famille rendue si disponible et correspondance visuelle la plus proche.

Transformer le résultat en décision de design

Utilisez DevTools ou une extension lorsque vous avez besoin de la pile technique d’un texte HTML actif. Utilisez une capture pour étudier une bannière, un logo, une vue mobile ou un design enregistré. La réponse la plus fiable vient généralement de la méthode adaptée aux éléments dont vous disposez.

Après avoir trouvé une famille probable, comparez les mêmes lettres avec le même poids et la même taille, puis vérifiez la licence avant de l’utiliser dans un projet client, un produit ou un site public.