Optimiseur de taille de livraison des polices web

• Analyse instantanée de la livraison des polices web : Analysez instantanément les déclarations CSS @font-face dans votre navigateur - sans envoi à un serveur, sans traitement cloud. Notre optimiseur détecte en temps réel l'absence de WOFF2, les formats hérités et les problèmes de font-display.
• Optimiseur de livraison des polices web en ligne et sécurisé : Votre code CSS ne quitte jamais votre appareil lors de l'analyse. Un traitement 100 % côté client garantit une confidentialité totale - aucun stockage cloud, aucun journal serveur, aucune exposition des URL de polices.
• Optimiseur de livraison des polices web - sans installation : Analysez et optimisez les déclarations @font-face directement dans votre navigateur, sans téléchargement, sans plugin et sans compte. Fonctionne sur tout navigateur moderne et tout système d'exploitation.
• Sortie CSS optimisée en un clic : L'optimiseur génère un bloc CSS @font-face nettoyé - formats EOT et SVG supprimés, font-display ajouté, replis local() ajoutés - prêt à copier ou à télécharger en fichier .css.

• Optimisation des polices pour les Core Web Vitals : Analysez les déclarations @font-face pour corriger les problèmes de LCP et de CLS liés aux polices. L'absence de font-display: swap provoque un texte invisible (FOIT) qui retarde le LCP ; l'optimiseur le détecte et le corrige automatiquement.
• Modernisation des piles de polices héritées : Modernisez les piles @font-face anciennes incluant EOT, SVG et TTF. L'optimiseur supprime les formats obsolètes, garantit que WOFF2 est en tête de la liste src et génère un CSS moderne et propre.
• Audit des polices d'un design system : Auditez les déclarations @font-face de votre design system ou bibliothèque de composants. L'optimiseur identifie l'absence de WOFF2, les valeurs incohérentes de font-display et les possibilités de passer à des polices variables.
• Auto-hébergement de polices conforme au RGPD : Détectez les URL du CDN Google Fonts dans les déclarations @font-face susceptibles d'enfreindre le RGPD en transmettant les adresses IP des utilisateurs à Google. L'optimiseur les signale et recommande l'auto-hébergement.
• Livraison de polices multilingue : Analysez les déclarations unicode-range pour les piles multilingues. L'optimiseur détecte l'absence de propriétés unicode-range qui fait télécharger tous les sous-ensembles de police même sur des pages monolingues.
• Préparation d'une migration vers les polices variables : Identifiez les familles avec 4 déclarations de graisse ou plus qui gagneraient à utiliser une police variable. L'optimiseur les signale et recommande cette approche pour réduire les requêtes HTTP.

L'optimisation de la livraison des polices web consiste à configurer les déclarations CSS @font-face pour minimiser le poids de téléchargement des polices, réduire les requêtes HTTP et éviter le blocage du rendu. Les facteurs clés sont : le choix du format (WOFF2 est 30 à 50 % plus petit que WOFF), font-display (évite le texte invisible pendant le chargement), unicode-range (permet le sous-ensemblage par script) et le repli local() (utilise les polices système lorsqu'elles sont disponibles). Notre optimiseur de taille de livraison des polices web analyse votre CSS @font-face, détecte tous ces problèmes et génère un CSS optimisé.

1. 1 Collez votre CSS @font-face : Collez n'importe quel CSS contenant des déclarations @font-face - depuis votre feuille de styles, un embed Google Fonts ou un fournisseur de polices. Toute l'analyse se fait localement dans votre navigateur : votre CSS et vos URL de polices ne quittent jamais votre appareil.
2. 2 Cliquez sur « Analyser la livraison des polices » : L'optimiseur analyse chaque bloc @font-face et extrait font-family, font-weight, font-style, font-display, unicode-range et toutes les entrées src. Il détecte l'absence de WOFF2, les formats hérités (EOT, SVG), l'absence de font-display et les problèmes RGPD.
3. 3 Consultez les recommandations et téléchargez le CSS optimisé : Les résultats affichent des badges de format par déclaration, des recommandations d'optimisation avec correctifs et un CSS nettoyé - EOT/SVG supprimés, font-display ajouté, replis local() ajoutés - prêt à copier ou télécharger.

• Format WOFF2 : WOFF2 utilise la compression Brotli et est 30 à 50 % plus petit que WOFF. Il est pris en charge par tous les navigateurs modernes (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Utilisez toujours WOFF2 en première entrée src.
• Propriété font-display : Contrôle la gestion du chargement des polices par le navigateur. swap affiche immédiatement le texte de repli (idéal pour le corps de texte) ; optional n'utilise la police que si elle charge en 100 ms (idéal pour les polices non critiques).
• Formats hérités (EOT, SVG) : EOT n'est nécessaire que pour IE8 et antérieurs (moins de 0,1 % de part de marché). Les polices SVG sont obsolètes. Les supprimer réduit la complexité du CSS et évite des requêtes HTTP inutiles sur les navigateurs anciens.
• unicode-range : Permet le sous-ensemblage des polices par script - le navigateur ne télécharge le fichier que pour les scripts réellement utilisés sur la page. Essentiel pour les sites multilingues avec de grandes familles CJK ou multi-scripts.

L'optimiseur de taille de livraison des polices web analyse uniquement les déclarations CSS - il ne télécharge ni ne mesure la taille réelle des fichiers de police. Les tailles estimées reposent sur des valeurs typiques par format (WOFF2 ~18 Ko, WOFF ~28 Ko, TTF ~45 Ko pour un sous-ensemble latin). Les tailles réelles dépendent du nombre de glyphes, des fonctionnalités OpenType et du sous-ensemblage. L'optimiseur ne peut pas vérifier si les fichiers WOFF2 sont réellement disponibles aux URL indiquées - contrôlez-les dans l'onglet Réseau de votre navigateur.