Détecter le font utilisé par un site juste en un clic

Il arrive que lorsque l’on visite un site, on tombe sur des typographies et des mises en forme surprenantes, la seule idée qui nous passe par la tête est : qu’est-ce qui se cache sous cette structure ?

Concernant le graphisme général du site, il n’y a rien à dire il suffit de bien regarder pour pouvoir les reproduire à sa guise, sans oublier le savoir-faire pour les réaliser bien évidemment.

Pour la façon dont le code a été développé, il y a Firebug qui permet de connaitre un peu comment le développement du site a été réalisé ou quel CSS a été utilisé pour arriver à un tel résultat.

Les outils de détection

Pour la détecter le font utilisé, on constate que Firebug fait également l’affaire mais il ne suffira pas.
Pour détecter en un clic le type de police, la meilleure solution est WhatFontTool. Un module complémentaire compatible Firefox / Chrome et Safari.

WhatFontTool sur Firefox

detection-font

WhatFontTool sur Chrome

what font tool sur firefox

WhatFontTool sur Safari

what font tool sur firefox

Celui-ci permet de trouver rapidement le nom d’une ou plusieurs polices d’écriture. Ainsi, ce dernier offre également la possibilité de savoir à partir de quel API la police a été récupérée : Google Font API ou TypeKit.

En plus, cet outil donnera des détails comme la taille, la couleur ou la propriété « line-height » utilisée par la police.

Fonctionnement de WhatFont

Compatible pour différents navigateurs, il suffit de glisser l’outil dans la barre des favoris.

Concernant l’outil proprement dit, ce dernier est entièrement compatible avec un bon nombre de navigateurs : Firefox 3.6+, Chrome 9+, Safari 4+ et Internet Explorer 9.

Avec la version 8 de IE, le navigateur supporte l’outil, mais son fonctionnement est limité.
Sur chrome, il existe une extension que l’on peut retrouver sur Chrome Web Store. Il en va de même sur Safari, il suffit de le télécharger puis de l’installer afin qu’il puisse être utilisé.

Enfin, il suffit de cliquer sur l’outil glissé dans vos favoris ou l’extension puis un petit survol des textes dont vous souhaitez savoir le nom de la police. Une infobulle apparaitra avec le nom de la police. Et pour connaitre les détails concernant la police, il ne vous suffira que de cliquer sur le texte.

Répondre