Réduction du nombre de pages webfonts dans FF Subsetter

Commencez par optimiser votre palette de caractères et voyez ce que vous chargez, mais n'utilisez pas. Les caractères gras et italiques de votre police de caractères peuvent être un bon point de départ. Vérifiez également les styles qui ne sont utilisés que dans certaines sections de votre site. Ces styles n'ont pas besoin d'être chargés initialement, sauf si l'utilisateur arrive dans une section qui les requiert.

Deuxièmement, je me pencherais sur la question du sous-ensemble. Voici de quoi il s'agit : Supposons que vous utilisiez une belle et grande police de caractères d'affichage pour placer des chiffres dans une infographie, mais que vous ne l'utilisiez que pour cela. Vous chargez l'intégralité du site police, mais vous n'utilisez que ses chiffres. Le sous-ensemble vous permet d'éliminer tous les caractères inutiles, de sorte qu'au lieu de charger le fichier complet de 90 kilo-octets, vous en chargez un de 5 kilo-octets.

Tous les principaux distributeurs de polices de caractères pour le web proposent des options de sous-ensembles, mais je parlerai ici de celui que nous avons créé, FF Subsetter, créé exclusivement pour réduire webfonts à partir de notre marque maison, FontFont. Vous pouvez l'essayer sans rien acheter. Suivez simplement le lien où vous trouverez une copie de démonstration de FF Bauer Grotesk Medium Web Pro qui vous attend dans le coin supérieur droit.

Ouvrez ce fichier zip pour trouver cette fantastique page de démonstration qui vous guidera à travers les fonctionnalités de la police web (ci-dessus). En jouant avec les ensembles stylistiques et d'autres boutons, vous aurez une meilleure idée de la façon dont FF Subsetter vous permet d'affiner la sensation d'un caractère en fonction de ses caractéristiques OpenType. Même si les caractéristiques OpenType les plus basiques sont largement supportées par tous les navigateurs actuels, le subsetter peut être utilisé pour intégrer uniquement celles que vous souhaitez, avec l'avantage supplémentaire d'une taille de fichier réduite.

D'accord. Téléchargez la police web (se terminant par .woff) dans FF Subsetter pour commencer à supprimer les éléments non essentiels. Par défaut, vous commencez par le sous-ensemble de base. Même si les options sont regroupées avec des coches qui activent ou désactivent l'ensemble du groupe, vous pouvez également procéder à des ajustements encore plus fins, en désactivant ou en activant des caractères individuels en les sélectionnant individuellement. Pour que ce processus ne soit pas trop précieux, je vous recommande d'effectuer quelques modifications arbitraires, de télécharger le fichier résultant et d'y ajouter un numéro, comme 001, afin de vous familiariser avec le fonctionnement de l'outil et de prendre l'habitude de marquer toutes les sorties de sous-ensembles ultérieures d'une manière identifiable.

Pour des options plus avancées, cliquez sur Expert Subsetting en haut de la page. Cette option vous permet de filtrer les caractères qui seront sous-définis en fonction de la langue ou des caractéristiques OpenType, comme je l'ai mentionné plus haut. Vous pouvez choisir de conserver tous les caractères nécessaires au fonctionnement d'une fonction donnée ou de geler la fonction, ce qui signifie que les caractères qui apparaissent lorsque cette fonction est activée deviennent la nouvelle valeur par défaut. Par exemple, si vous souhaitez que le FF Bauer Grotesk soit toujours représenté avec un a minuscule à deux étages, figez l'ensemble stylistique 2 et votre a préféré s'affichera par défaut.

Une remarque sur le sous-ensemble par langue : Veillez à ne pas procéder à un sous-ensemble trop agressif, comme l'appelle Bram Stein, développeur de Typekit. Ce n'est pas parce que j'écris ceci en anglais que je peux savoir dans quelles autres langues les navigateurs traduiront cette histoire. Et même en anglais, je ne peux pas exclure l'éventualité de mentionner un créateur de caractères comme František Štorm ou Peter Biľak dont le nom pourrait contenir un caractère que j'ai supprimé. Vous pouvez bien sûr décider de vous arrêter au grec ou au cyrillique, ou de créer un sous-ensemble secondaire police ne contenant que ces caractères, et de l'ajouter juste derrière dans votre pile police .

Comme le mentionne l'avertissement, toutes les fonctionnalités avancées ne sont pas utiles lorsqu'elles sont utilisées en une seule fois. Les données de crénage, par exemple, ne doivent être supprimées que si vous n'en avez vraiment pas besoin. Quand pouvez-vous vous en passer ? Si vous n'utilisez une police de caractères que pour placer des chiffres dans des tableaux, les données de crénage ne sont pas pertinentes et peuvent être supprimées, car les caractères qui ont tous la même largeur ne nécessitent pas de crénage. Qu'en est-il du crénage ? Il y a très peu de cas auxquels je peux penser où se débarrasser des données de hinting est une bonne idée. L'un d'entre eux pourrait être le cas où vous savez que vous n'utiliserez le caractère qu'à une taille assez grande.

Voilà, c'est fait. Suivez ces étapes et vous serez sur la bonne voie pour alléger le chargement des pages.

Quelques remarques finales : Le chargement asynchrone de police peut être simplifié en utilisant ce chargeur de webfont open source, réalisé en collaboration par les gens de Typekit et de Google. Et, bien que le dernier format, woff2, soit disponible sur notre site webfonts, FF Subsetter ne le supporte pas pour l'instant. Restez à l'écoute pour des mises à jour à ce sujet.

Vous avez des questions sur ce sujet ? N'hésitez pas à m'en faire part !