Comment identifier les polices d'un site Web

Avez-vous déjà trouvé la police parfaite pour votre site Web sur un site, une image ou un blog différent, mais vous ne saviez pas comment trouver son nom ? Vous êtes arrivé au bon endroit. Dans ce guide, nous vous montrerons comment identifier les polices d'un site Web pour vous aider à trouver la typographie parfaite pour votre entreprise.

Pourquoi est-il utile de voir quelles polices un site Web utilise ?

Si vous travaillez à la création de votre site Web ou à la conception de votre contenu en ligne, vous êtes toujours à la recherche de moyens de l'améliorer. Vous pouvez le faire de plusieurs façons. Les plus évidentes utilisent un thème différent, ajoutent des fonctionnalités et fournissent un meilleur contenu. Mais il y a d'autres choses pas si évidentes que vous pouvez faire pour avoir un avantage sur vos concurrents et rendre votre site unique. La police est l'un d'entre eux.

La police que vous utilisez est partout sur votre site et peut non seulement améliorer la lisibilité mais aussi la navigation globale. Si votre typographie a l'air professionnelle et est facile à lire, vos visiteurs sont plus susceptibles de rester sur votre site. Les polices sont souvent négligées mais peuvent avoir un impact important.

Même si vous pouvez ajouter des polices à votre site, vous souhaiterez peut-être utiliser une typographie que vous ne trouvez pas par les moyens traditionnels. Internet regorge de sites Web avec une belle typographie que vous voudrez peut-être utiliser sur votre site. Cependant, la partie la plus difficile consiste à identifier les polices utilisées par ces sites Web. Il n'y a pas de moyen facile de trouver une police et même si vous êtes un expert, il existe des tonnes de minuscules différences dans chaque police. De plus, ces différences peuvent être amplifiées par les styles de police et les changements CSS.

C'est pourquoi, dans cet article, nous allons vous montrer comment utiliser différents outils pour savoir quelles polices un site Web utilise .

Comment identifier les polices d'un site Web

Il existe plusieurs façons d'identifier les polices sur un site Web :

1. Utilisation de l'outil d'inspection
2. Avec des plugins
   1. FFFRetour
   2. Source
   3. Fontanello
   4. Quelle police

Certains d'entre eux sont plus difficiles à utiliser que d'autres et certains peuvent nécessiter des outils et des extensions externes. Examinons de plus près toutes ces différentes méthodes.

1) Identifiez les polices à l'aide de l'outil d'inspection

Le moyen le plus simple d'identifier les polices d'un site Web consiste à utiliser l' outil d'inspection du navigateur . Pour cela, vous devrez ouvrir les outils de développement de votre navigateur. Généralement, vous pouvez le faire de différentes manières :

• En appuyant sur F12 ou Ctrl+Maj+I sur votre navigateur
• Ouvrez le menu du navigateur en cliquant avec le bouton droit de la souris, puis en allant sur Inspecter
• Ouvrir les options de l' outil de développement à partir du menu du navigateur et accéder à Web Developer

Lorsque vous trouvez une police que vous aimez, cliquez avec le bouton droit sur le texte contenant la police que vous souhaitez identifier et cliquez sur Inspecter l'élément.

Cet élément sera mis en évidence sur l'outil d'inspecteur, et vous verrez les styles et les mises en page sur les cases à côté de l'inspecteur.

Ensuite, cliquez sur l'onglet Calculé et faites défiler vers le bas pour vérifier le champ Font-Family . Ce champ doit répertorier la police du site Web. Par exemple, dans cet exemple, la police est Roboto ou SF-Pro Display.

De cette façon, vous pouvez identifier les polices sur n'importe quel site Web à l'aide de l'outil Inspecteur. Cependant, vous pouvez trouver des sites sur lesquels vous ne pouvez pas cliquer avec le bouton droit de la souris ou accéder à l'outil d'inspection car ils ne le permettent pas. Si tel est le cas, il existe une autre alternative. Vous pouvez également voir quelle police le site Web utilise avec un outil dédié.

Jetons un coup d'œil à certains des meilleurs plugins que vous pouvez utiliser pour identifier les polices d'un site Web.

2) Identifiez les polices à l'aide d'outils et de plugins

Si vous ne pouvez pas utiliser l'outil d'inspection sur un site Web, vous identifiez les polices à l'aide d'outils et de plug-ins dédiés. Il existe plusieurs outils, alors pour vous faciliter la vie, nous énumérerons les meilleurs et vous montrerons comment vous pouvez les utiliser pour trouver et reconnaître les polices utilisées sur différents sites.

2.1) FFFFallBack

FFFFallback est un simple outil de bookmarklet que vous pouvez utiliser pour identifier les polices sur n'importe quel site Web. Et la meilleure partie est que vous n'avez rien à installer. Il vous suffit d'enregistrer le bookmarklet dans votre onglet de signets et de cliquer sur son signet sur n'importe quel site pour vérifier les polices. L'outil utilise Javascript pour scanner le CSS et identifier la typographie ainsi que son style de police.

Pour utiliser cet outil, vous devez ouvrir cette page. Ensuite, cliquez sur le bouton FFFFALLBACK et faites-le glisser vers votre barre de favoris comme indiqué ci-dessous. Si la barre de favoris n'est pas affichée sur votre navigateur, appuyez sur Ctrl+Maj+B pour l'activer.

Maintenant, ouvrez un site Web sur lequel vous souhaitez identifier les polices et cliquez sur le Bookmarklet que vous venez d'enregistrer dans votre barre de favoris. Il devrait vous montrer la famille de polices et le style du site Web dans une nouvelle colonne, comme indiqué ci-dessous. Assurez-vous de sélectionner Web Font comme option en haut.

2.2) Source

Font est similaire à FFFFALLBACK, mais il vous permet également de vérifier les polices de textes spécifiques. De cette façon, vous pouvez spécifier les textes dont vous souhaitez vérifier les polices.

Pour utiliser Fount, rendez-vous sur ce site et enregistrez le Bookmarklet de son site Web en le faisant glisser vers votre onglet Signets.

Ensuite, ouvrez n'importe quel site Web dont vous souhaitez vérifier les polices et cliquez sur le signet Fount. Cela changera votre curseur en un plus. Cliquez simplement sur n'importe quel texte et il vous montrera la police identifiée en haut à droite de votre écran.

Une fois que vous connaissez la police de ce texte, vous pouvez cliquer à nouveau sur la case Police pour désactiver le curseur et continuer à parcourir votre page comme d'habitude.

2.3) Fontanelle

Si vous préférez utiliser des extensions de navigateur, Fontanello est l'outil idéal pour identifier les polices de n'importe quel site Web. Installez simplement l'extension Fontanello sur Chrome ou Firefox et activez-la.

Pour identifier les polices sur un site, faites simplement un clic droit sur n'importe quel texte et sélectionnez l'option Fontanello . Le menu déroulant vous montrera la famille de polices ainsi que son style et ses variantes.

2.4) Quelle police

Alternativement, vous pouvez utiliser l'extension WhatFont de la même manière. Tout d'abord, installez l'extension sur Chrome ou Firefox. Ensuite, cliquez sur l'icône de l'outil WhatFont dans la barre d'outils de votre navigateur et cliquez sur n'importe quel texte pour vérifier sa police. La bonne chose est que vous pouvez sélectionner différents textes et voir quelle typographie ils utilisent simultanément.

Une fois que vous avez terminé, appuyez sur Quitter WhatFont pour fermer les fenêtres contextuelles de police et utiliser la page Web comme d'habitude.

Maintenant que nous avons vu comment identifier les polices à partir du texte, vous vous demandez peut-être s'il est possible de faire la même chose à partir des images. La réponse est oui! Voyons comment faire cela.

Comment identifier les polices d'une image

Outre la découverte de polices à partir de texte, vous pouvez également identifier les polices d'un site Web à travers les images. Pour ce faire, nous utiliserons un outil en ligne appelé WhatTheFont .

Quelle est la police

Cet outil en ligne vous permet de télécharger n'importe quelle image, d'analyser le texte de l'image et de vous indiquer la police utilisée.

Pour ce faire, rendez-vous sur cette page et faites glisser ou téléchargez l'image sur l'outil (assurez-vous qu'elle est au format JPG ou PNG.) Ensuite, définissez la zone de recadrage pour le texte, et l'outil vous montrera la bonne police du texte. En plus de cela, WhatTheFont vous propose également des sites Web où vous pouvez acheter les polices et vous permet même de tester les polices avec votre texte personnalisé.

De cette façon, vous pouvez vérifier les polices à partir d'images ou de captures d'écran. De plus, il dispose d'une application mobile que vous pouvez également utiliser pour identifier les polices de votre mobile.

Conclusion

Dans l'ensemble, la police que vous utilisez peut avoir un impact important sur votre site. Cela peut vous aider à améliorer la lisibilité, la navigation globale et à garder vos visiteurs plus longtemps. La clarté et la lisibilité sont des aspects importants de tout site et plus vous y consacrez d'efforts, meilleurs seront les résultats que vous obtiendrez.

Dans ce guide, nous avons vu différentes manières d'identifier les polices d'un site Web :

• Utilisation de l'outil d'inspection du navigateur
• Utilisation des outils Bookmarklet
• Via les extensions de navigateur
• Utilisation d'outils en ligne dédiés pour identifier les polices à partir d'images

Une fois que vous avez trouvé les bonnes polices, c'est à vous de choisir comment les ajouter à votre site. Une fois que vous avez choisi la typographie que vous souhaitez utiliser, nous vous recommandons de consulter notre guide sur la façon de changer la police dans WordPress pour passer à votre nouvelle police en un rien de temps.

Si vous cherchez d'autres façons d'améliorer la lisibilité et la navigation sur votre site WordPress, vous pouvez également consulter ces articles :

• Comment ajouter des fils d'Ariane dans WordPress
• Organiser les produits WooCommerce par marque
• Comment ajouter un méga menu WordPress

Avez-vous découvert de nouvelles polices ? Quelle méthode as-tu utilisé ? Faites-nous savoir dans la section commentaires ci-dessous!