1. Origine
WhatFont est une extension Chrome et Safari créée par Chengyin Liu, une référence répandue parmi les designers et développeurs web. Son concept est d'une simplicité radicale : activer l'extension, survoler un texte sur n'importe quelle page web, et obtenir instantanément le nom de la police, sa taille, son poids, son style et sa couleur. Sans inspecter le code source, sans ouvrir les DevTools, sans copier-coller de propriétés CSS.
2. Utilité
Pour un studio Webflow, WhatFont accélère la veille typographique et l'analyse de sites de référence. Quand on visite un site dont la typographie est particulièrement réussie, WhatFont identifie immédiatement la police utilisée, souvent une combinaison de polices que l'on n'aurait pas identifiée facilement à l'œil nu. C'est aussi un outil utile pour vérifier que les polices définies dans un système de design Webflow s'appliquent bien aux bons éléments en production.
3. Fonctionnalités
WhatFont s'active via son icône dans la barre du navigateur. Une fois activé, le curseur devient un outil d'inspection : survoler un texte affiche une bulle avec le nom de la police et ses propriétés (famille, taille, poids, hauteur de ligne, couleur). Un clic sur le texte fixe l'information et affiche des détails supplémentaires, notamment la source de la police (Google Fonts, Adobe Fonts, police système, etc.).
L'extension fonctionne sur toutes les pages web, y compris les sites en staging et les previews Webflow. Elle détecte les polices chargées via Google Fonts, Adobe Fonts, ou en auto-hébergement, et affiche la source de chargement. Elle ne fonctionne pas sur les pages protégées par des iframes cross-origin ni sur les pages système du navigateur.
4. Cas concrets
→ Un studio visite un site primé sur Awwwards dont la combinaison typographique est particulièrement marquée. WhatFont identifie en quelques secondes la police de titre (un serif peu connu disponible sur Adobe Fonts) et la police de corps (une variation de système). Ces informations alimentent le moodboard typographique du prochain projet.
→ En phase d'intégration Webflow, un développeur utilise WhatFont pour vérifier que les polices chargées sur la page de staging correspondent bien aux spécifications du design system, confirmation que les fichiers sont bien chargés depuis la bonne source.
5. Prix
WhatFont est entièrement gratuit.
→ Installer l'extension : Chrome Web Store
6. Questions fréquentes
WhatFont fonctionne-t-il sur les polices variables ?
Oui, il affiche les propriétés CSS de l'élément, y compris les variations de poids et de style. Pour les polices variables, les valeurs CSS affichées reflètent les axes utilisés sur l'élément survolé.
WhatFont peut-il identifier des polices customisées ou propriétaires ?
Il affiche le nom de la famille de police tel qu'il est défini dans le CSS. Si la police est hébergée en auto-hôte avec un nom custom, WhatFont affiche ce nom, à toi d'identifier ensuite si c'est une police commerciale connue ou une fonte propriétaire.
WhatFont est-il disponible sur Safari ?
Oui, WhatFont est disponible en extension Safari depuis 2020. Pour les studios qui travaillent sous macOS, l'expérience est identique à la version Chrome.
WhatFont fonctionne-t-il sur Firefox ?
Non, WhatFont n'a pas de version officielle Firefox. L'inspecteur de polices intégré dans les DevTools Firefox (onglet Polices dans l'inspecteur) offre des informations similaires nativement.
