Il est temps pour un autre screencast d'appariement! Cette fois, j'ai Zach Leatherman, de Filament Group. Zach a effectué de nombreuses recherches, écrit et parlé du chargement des polices Web ces dernières années. Il a un guide complet là-dessus!
Il y a quelques problèmes avec la manière par défaut de charger les polices personnalisées. Comme dans, il suffit de relier une police dans du CSS via @ font-face. Même la façon dont Google Fonts vous propose d'utiliser leurs polices, Zach appelle un anti-motif (en fin de compte, c'est juste vanilla @ font-face). Différents navigateurs font des choses différentes avec @ font-face. Par exemple, certaines versions de Safari rendent le type défini dans une police personnalisée invisible jusqu'à ce que la police se charge, mais n'a pas de délai d'expiration, donc si la police échoue pour une raison quelconque, vous pourriez être dans le pire des cas: un texte à jamais invisible sur le site.
Vous n'avez pas beaucoup de contrôle sur le chargement des polices @ font-face, à moins que vous ne preniez les choses en main. Cela signifie des choses comme: insérer la police, sous-définir la police (soit avec un ensemble «critique» de glyphes, soit au moins réduire les glyphes à la langue utilisée), utiliser des chargeurs de polices pour déterminer quand les polices se chargent et modifier les classes pour les utiliser . Ce dernier est particulièrement intéressant. Lorsque vous exercez un contrôle sur le chargement des polices, vous devez non seulement gérer quand / comment le navigateur charge le CSS qui contient le @ font-face, mais également quand / comment le navigateur rencontre des éléments de texte qui doivent utiliser ces polices. Les polices qui ne sont pas utilisées ne sont pas téléchargées. Donc, parfois, la procédure consiste à les forcer à télécharger, à attendre leur téléchargement, puis à appliquer des classes pour les utiliser réellement.
Quelques outils que nous avons examinés:
- Firefox DevTools était meilleur pour regarder les polices utilisées
- Les sous-ensembles de polices peuvent être effectués dans le générateur Font Squirrel ou Font Prep.
- Quels glyphes sous-définissez-vous? Testez ce dont vous avez besoin sur certaines URL avec Glyphhanger.
- Comment savoir si le navigateur utilise du faux gras / italique? faux pas.