Instancieur de polices variables

• Instanciation instantanée de polices variables : notre instancieur de polices variables lit tous les axes de la police (graisse, largeur, inclinaison, taille optique) et génère une instance statique instantanément dans votre navigateur - sans envoi à un serveur, sans traitement cloud, sans attente.
• Instancieur de polices variables en ligne sécurisé : votre fichier de police ne quitte jamais votre appareil lorsque vous utilisez notre instancieur de polices variables en ligne. Toute l'analyse des axes et la suppression des tables se font localement grâce à la bibliothèque opentype.js dans le navigateur - 100 % privé.
• Instancieur de polices variables sans installation : créez des instances de polices variables directement dans votre navigateur sans logiciel à télécharger, sans plugin et sans compte. Notre instancieur de polices variables fonctionne sur tout navigateur moderne et tout système d'exploitation.
• Instances nommées + contrôle manuel des axes : appliquez les instances nommées intégrées (Regular, Bold, Light, etc.) en un clic, ou faites glisser les curseurs d'axes pour contrôler précisément la graisse, la largeur, l'inclinaison, la taille optique et tout axe personnalisé.

• Optimisation des performances web : réduisez le poids des polices pour les projets web qui n'utilisent qu'une seule graisse ou un seul style. Supprimer les tables variables d'une police variable de 200 Ko peut produire une instance statique de 60 à 80 Ko - une amélioration notable des temps de chargement.
• Amélioration des Core Web Vitals et du LCP : éliminez la surcharge inutile des polices variables pour les pages qui n'utilisent qu'un seul style de police. Notre instancieur de polices variables produit une police statique qui se charge plus vite et réduit les requêtes de police bloquant le rendu.
• Intégration de polices dans les applications mobiles : intégrez une instance précise de graisse et de largeur dans les applications mobiles plutôt que la police variable complète. Une instance statique est plus légère et plus rapide à charger sur les appareils mobiles à mémoire et bande passante limitées.
• Diffusion de polices dans un design system : générez des instances de graisses précises (Regular 400, Medium 500, Bold 700) à partir d'une seule police variable pour les paquets de design system. Les instances statiques garantissent un rendu cohérent dans tous les environnements.
• Compatibilité avec les navigateurs anciens : créez des instances statiques pour les environnements qui ne prennent pas en charge les polices variables - navigateurs anciens, générateurs de PDF et clients de messagerie. Notre instancieur de polices variables produit une sortie TTF/OTF standard.
• Optimisation CDN et ressources statiques : réduisez les coûts de stockage et de bande passante du CDN en servant des instances statiques plutôt que des polices variables complètes. Une instance statique à une graisse donnée est généralement 40 à 60 % plus légère que le fichier de police variable complet.

L'instanciation de polices variables est le processus consistant à convertir une police variable - qui encode une plage continue de styles le long de plusieurs axes de design (graisse, largeur, inclinaison, taille optique) - en une instance statique plus légère figée à des valeurs d'axes précises. Les polices variables utilisent la spécification OpenType 1.8 et stockent les données de variation des glyphes dans des tables comme fvar (variations de police), gvar (variations de glyphes) et HVAR/VVAR (variations de métriques). Ces tables peuvent ajouter 50 à 150 Ko à un fichier de police. Notre instancieur de polices variables lit les définitions d'axes de la police avec opentype.js, vous permet de définir les valeurs d'axes et supprime les tables propres aux polices variables pour produire une police statique plus légère - le tout localement dans votre navigateur.

1. 1 Importez votre police variable : glissez-déposez n'importe quel fichier de police variable (TTF, OTF, WOFF, WOFF2). L'outil analyse la table fvar avec opentype.js pour extraire toutes les définitions d'axes et instances nommées - aucune donnée n'est envoyée à un serveur.
2. 2 Définissez les valeurs d'axes : utilisez les préréglages d'instances nommées (Regular, Bold, Light, etc.) pour une sélection en un clic, ou faites glisser les curseurs d'axes pour définir des valeurs précises de graisse, largeur, inclinaison, taille optique et tout axe personnalisé. Tout le traitement se fait localement dans votre navigateur.
3. 3 Téléchargez l'instance statique : cliquez sur « Créer une instance statique » - l'outil supprime les tables propres aux polices variables (fvar, gvar, avar, HVAR, VVAR, MVAR, STAT) et télécharge la police statique plus légère. Le panneau de résultats affiche la taille d'origine, la taille de sortie et le pourcentage de réduction.

• fvar (Font Variations) : la table de définitions d'axes - elle définit tous les axes de design, leurs plages et les instances nommées. Supprimée dans la sortie statique puisque les axes ne sont plus nécessaires.
• gvar (Glyph Variations) : la plus grande table variable - elle stocke les ajustements delta de chaque contour de glyphe à chaque position d'axe. Sa suppression produit la plus forte réduction de taille.
• HVAR / VVAR (Metric Variations) : stockent les variations de largeur d'avance et de hauteur dans tout l'espace de design. Supprimées puisque les métriques sont figées aux valeurs d'axes choisies.
• STAT / avar / MVAR / cvar : tables de variation supplémentaires pour les attributs de style, la normalisation des axes, les variations de métriques et les variations de CVT - toutes supprimées dans la sortie de l'instance statique.

Cet outil effectue une suppression de tables - il retire les tables propres aux polices variables pour produire une police plus légère, mais n'applique pas les ajustements delta au niveau des glyphes sur les contours. La police de sortie utilise les contours de glyphes par défaut de la police variable, qui peuvent ne pas correspondre parfaitement au rendu aux valeurs d'axes autres que celles par défaut. Pour une instanciation complète au niveau des glyphes (application des ajustements delta pour produire des contours exacts aux valeurs d'axes choisies), utilisez l'instancieur de fonttools (fonttools varLib.instancer) ou l'outil de bureau d'instanciation de polices variables de Google Fonts.