Dites les perf people, est-ce unicode-range pour les fontes limite le poids de la ressource téléchargée ? Tout ce que je lis le sous-entend, mais en lisant la spéc ça me semble incorrect et sert seulement de garde-fou pour ne pas télécharger la fonte inutilement.
Me trompè-je ?
=> More informations about this toot | More toots from ffoodd
@ffoodd c’est bien ça. Le fichier chargé n’est clairement pas modifié à la volée, il faudra attendre le stream de fontes pour ça.
Donc oui, en déclarant le range supporté par la fonte, tu t’assures qu’elle n’est chargée que si utile.
=> More informations about this toot | More toots from nhoizey
@nhoizey Merci, ça confirme ce que je pensais !
=> More informations about this toot | More toots from ffoodd
@ffoodd un plaisir !
Les réponses de @boostmarks et @jpvincent complètent bien.
Pour un usage extrême : sur mon site photo, je fais un subset de la fonte que j’utilise pour les titres avec exactement les caractères utilisés dans les contenus. Pas un de plus. C’est surtout possible parce que c’est un site statique généré complètement à chaque fois.
=> More informations about this toot | More toots from nhoizey
@nhoizey @boostmarks @jpvincent Oui, je me souviens que tu avais expliqué ça dans un article ou une conf : tu recupérais les caractères et passait ça directement à glyphhanger au build, il me semble ?
=> More informations about this toot | More toots from ffoodd
@ffoodd je génère ce fichier :
https://nicolas-hoizey.photo/tools/subset.txt
Puis j'utilise cette commande glyphhanger effectivement:
https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/package.json#L45
Je ne le fais plus à chaque build pour limiter son empreinte, mais manuellement de temps en temps quand je sais que je publie une nouvelle photo avec un titre qui pourrait ajouter des caractères.
Je dois aussi reporter manuellement dans mon CSS le range généré:
https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/assets/sass/_fonts.scss
@boostmarks @jpvincent
=> More informations about this toot | More toots from nhoizey
@nhoizey @ffoodd @boostmarks rien à voir, mais comment tu trouves les valeurs de ascent-override et les autres un peu exotiques ?
Je me contente de size-adjust, à la main, trouvant les scripts un peu overkill pour un job que tu fais une fois par projet
=> More informations about this toot | More toots from jpvincent
@jpvincent Opinion peut-être controversée : je pense qu'adapter les polices de fallback aux métriques des polices souhaitées est un travail inutile et coûteux. Personne n'a envie que la police de fallback s'affiche temporairement donc je privilégie l'optimisation du chargement des polices. @nhoizey @ffoodd @boostmarks
=> More informations about this toot | More toots from anthony@indieweb.social
@anthony je suis d'accord dans 95 % des cas, le chargement des polices n'étant pas encore suffisamment optimisé.
Pour les 5 % déjà optimisés, ajuster le fallback est quand même intéressant.
Et j'adore réussir à convaincre des clients de retirer des polices (au moins certaines graisses), combat pas simple. Pouvoir passer à une police variable est encore trop rare.
@jpvincent @ffoodd @boostmarks
=> More informations about this toot | More toots from nhoizey
@jpvincent @nhoizey @ffoodd https://screenspan.net/fallback est pas mal.
=> More informations about this toot | More toots from boostmarks@hachyderm.io
@boostmarks @jpvincent @ffoodd je l'utilise effectivement, mais il a parfois des comportements bizarres dans la zone de preview, qui peuvent complexifier l’obtention des valeurs.
=> More informations about this toot | More toots from nhoizey
@boostmarks @jpvincent @ffoodd j’utilisais avant https://meowni.ca/font-style-matcher/
Il me semble avoir déjà tenté https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/ mais sans succès.
J’ai aussi repéré https://github.com/unjs/fontaine mais pas eu l’occasion de tester, c'est moins immédiat comme mise en œuvre.
=> More informations about this toot | More toots from nhoizey This content has been proxied by September (3851b).Proxy Information
text/gemini