Extracteur de polices web.

Qu’est-ce qu’un extracteur de polices ?

Un extracteur de polices est un outil en ligne qui identifie les polices de caractères utilisées sur une page web et vous donne un accès direct aux fichiers correspondants. Au lieu de deviner une police à l’œil, vous collez un lien et obtenez la liste précise des familles, graisses, styles et formats chargés par le site. FontExtractor est un extracteur de polices web gratuit qui fait exactement cela en quelques secondes, avec des aperçus en direct et un téléchargement en un clic.

Les sites modernes se limitent rarement aux quelques polices installées sur tous les ordinateurs. Ils chargent des polices web personnalisées via des règles CSS @font-face, depuis Google Fonts, Adobe Fonts, un CDN ou leur propre serveur. Ces règles sont dispersées dans de nombreuses feuilles de style, des instructions @import imbriquées et des balises <style> en ligne, ce qui rend leur recherche manuelle fastidieuse. Un extracteur de polices les lit toutes à votre place.

FontExtractor en bref

Comment utiliser l’extracteur de polices par URL

Utiliser notre extracteur de polices à partir d’une URL prend moins d’une minute :

1. Copiez l’adresse de la page dont vous voulez étudier la typographie. Toute page publique fonctionne, pas seulement l’accueil.
2. Collez-la dans le champ en haut de cette page et cliquez sur Extraire les polices. Inutile de saisir https://, nous l’ajoutons pour vous.
3. Consultez les résultats. Chaque famille apparaît sous forme de carte, affichée dans sa propre police, avec toutes ses graisses et ses styles en dessous.
4. Testez votre propre texte dans le champ d’aperçu et ajustez la taille pour voir le rendu en titre comme en texte courant.
5. Téléchargez ou copiez. Enregistrez les fichiers un par un, téléchargez l’ensemble en ZIP avec un fonts.css assorti, ou copiez le CSS @font-face d’une famille.

Quelles polices un extracteur de polices web peut-il détecter ?

FontExtractor détecte les polices qu’une page déclare dans son HTML et son CSS : fichiers auto-hébergés, Google Fonts, Adobe Fonts, polices variables et polices intégrées en base64, aux formats WOFF2, WOFF, TTF, OTF, EOT et SVG.

FontExtractor suit le même chemin qu’un navigateur lorsqu’il affiche une page. Il télécharge le HTML, découvre chaque feuille de style liée (y compris les techniques de chargement preload et print-then-all des sites optimisés), suit les chaînes @import sur plusieurs niveaux et analyse chaque bloc @font-face. Le résultat couvre :

• les polices auto-hébergées servies depuis le domaine ou le CDN du site ;
• Google Fonts, avec chaque sous-ensemble unicode comme latin, latin-ext ou cyrillic ;
• Adobe Fonts (Typekit) et les autres services de polices distribués via CSS ;
• les polices variables, affichées avec toute leur plage de graisses, par exemple 100–900 ;
• les polices base64 intégrées directement dans la feuille de style sous forme d’URI data: ;
• les polices préchargées déclarées avec <link rel="preload" as="font"> ;
• tous les formats courants : WOFF2, WOFF, TTF, OTF, EOT et SVG. Quand une règle en propose plusieurs, le plus efficace est choisi automatiquement.

Au-delà des fichiers téléchargeables, l’outil indique aussi les piles de polices demandées par le CSS. Vous savez ainsi si un site repose sur des polices système comme -apple-system, Segoe UI ou Helvetica Neue, qu’aucun extracteur ne peut télécharger puisqu’elles sont installées sur l’appareil du visiteur.

Pourquoi les designers et développeurs extraient des polices

La typographie porte une grande partie de la personnalité d’une marque : « quelle est cette police ? » est donc l’une des questions les plus fréquentes en design. Voici les situations où un extracteur de polices fait gagner le plus de temps :

• Inspiration et veille. Créez des moodboards et comparez comment les meilleurs produits associent polices de titre et de texte.
• Développement front-end. Reproduisez fidèlement une mise en page, déboguez une police qui ne se charge pas ou vérifiez les formats servis.
• Audits de marque. Vérifiez que chaque page de votre site charge les polices validées, sans fichiers hérités oubliés.
• Optimisation des performances. Repérez les sites qui chargent trop de graisses ou servent encore de lourds fichiers TTF au lieu de WOFF2.
• Travail client. Quand un client ignore quelles polices utilisait son ancien site, l’extracteur les retrouve en quelques secondes.

Pouvez-vous utiliser les polices extraites d’un site web ?

Pouvoir télécharger un fichier de police ne signifie pas que vous avez le droit de l’utiliser. Les polices sont des logiciels, et la plupart des polices commerciales sont licenciées par site, par application ou selon le nombre de pages vues. Beaucoup de polices du web sont open source — presque tout ce que propose Google Fonts relève de la licence SIL Open Font License, par exemple — mais les familles premium des fonderies ou d’Adobe Fonts ne sont licenciées qu’au site qui les a achetées.

Utilisez FontExtractor pour identifier des polices, les évaluer et les tester en local. Avant de publier une police dans votre propre projet, vérifiez sa licence et, si nécessaire, achetez-la auprès de sa fonderie. Soutenir les créateurs de caractères, c’est permettre à de nouvelles polices de voir le jour.

Extracteur de polices ou DevTools et extensions ?

Utilisez un extracteur de polices en ligne pour lister d’un coup toutes les polices d’une page. Utilisez les DevTools du navigateur ou une extension pour les pages protégées par une connexion ou les polices ajoutées par JavaScript.

Vous pouvez chercher les polices manuellement avec les outils de développement du navigateur : inspecter un élément, ouvrir le panneau Computed, puis chercher les requêtes de polices dans l’onglet Network. Cela fonctionne pour un élément, mais devient vite laborieux quand un site utilise plusieurs familles, sous-ensembles unicode et polices variables. Les extensions aident, mais elles demandent une installation, des permissions sur chaque site visité, et n’affichent souvent que la police de l’élément survolé.

Un extracteur de polices web en ligne ne nécessite aucune installation, fonctionne sur tous les appareils — téléphones et tablettes compris — et renvoie d’un coup l’inventaire typographique complet d’une page, avec aperçus, noms de fichiers propres et CSS téléchargeable.

Conseils pour de meilleurs résultats

Pour de meilleurs résultats, analysez la page exacte qui vous intéresse et, si aucune police n’apparaît, essayez directement l’URL de l’une de ses feuilles de style.

• Analysez précisément la page qui vous intéresse : pages d’atterrissage, blogs et documentation chargent souvent des polices différentes.
• Si un site ne renvoie aucune police, il génère peut-être ses styles en JavaScript après le chargement. Essayez d’analyser directement l’URL d’une de ses feuilles de style.
• Certains sites bloquent les requêtes automatisées avec une protection anti-bots. En cas d’échec, réessayez plus tard ou analysez une autre page du même domaine.
• Privilégiez les fichiers WOFF2 pour le web : ce sont les plus légers et tous les navigateurs modernes les prennent en charge.
• Conservez les règles unicode-range du CSS copié pour que le navigateur ne télécharge que les sous-ensembles nécessaires.

Envie de savoir quelles polices utilise votre site préféré ? Remontez en haut de la page, collez le lien et laissez l’extracteur de polices faire le travail.