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
Ping @jpvincent ou @boostmarks, mes références en la matière 💜
=> More informations about this toot | More toots from ffoodd
@ffoodd @jpvincent en soi, unicode-range sert juste à définir quand la police doit être chargée. Mais derrière tu peux doubler d'un font subsetting pour concrètement enlever les caractères inutiles.
Reste ensuite à faire les deux à l'échelle, avec des caches serveurs capables de délivrer des font files de tailles variables en fonction des critères d'unicode range (souvent c'est pas dynamique mais par famille de glyphes, afin de contrôler le nombre de variants sur un même font file).
=> More informations about this toot | More toots from boostmarks@hachyderm.io
@boostmarks @ffoodd pareil, ça fait pas de miracle en soi, mais c'est la techno qui permet d'éclater ton gros fichier de font par grande famille de caractères, et par exemple les utilisateurs qui ne voient que du contenu en arabe n'auront pas les fichiers avec du cyrillique ou du coréen
=> More informations about this toot | More toots from jpvincent
@boostmarks @ffoodd ça demande à avoir subset préalablement. Normalement tu tombes à 15-20ko un fichier pour les langues d'Europe de l'ouest en woff2. X2 en variable font.
=> More informations about this toot | More toots from jpvincent
@jpvincent @boostmarks C'est ce que j'avais en tête, mais ça faisait un moment que je n'avais pas plongé dans le sujet.
Le vrai pouvoir c'est le subset, unicode-range permet juste de l'expliciter pour ne charger que s'il correspond.
Je suis dans un cas où je vais faire plusieurs subsets à un seul caractère, que je n'appellerai que dans les pages qui s'en servent (ce que je maitrise). Dans de contexte unicode-range n'aura aucune plus-value, puisque j'aurais déjà fait le tri en amont.
Merci !
=> More informations about this toot | More toots from ffoodd
@jpvincent @boostmarks Donc accessoirement, tous les articles sur le sujet (sur MDN, web.dev, css-tricks, etc.) utilisent des formulations qui peuvent induire en erreur.
C'est ballot. Je vais regarder si je peux en expliciter certains 🤔
=> More informations about this toot | More toots from ffoodd
@ffoodd @boostmarks ah c'est amusant comme cas oui :)
Mais si tu as déjà la mécanique qui génère une déclaration font-face par page, dont tu connais à l'avance le contenu, c'est effectivement trop tard.
Range t'aurait absous de connaître ton contenu
=> More informations about this toot | More toots from jpvincent
@jpvincent @boostmarks Tout à fait, mais je suis dans un de mes projets exotiques qui correspondent rarement à l'usage nominal des technos 😅
=> 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
@ffoodd Avec @dioxmat on a bossé sur l'optimisation des polices de AMO.
Tu peux voir que https://addons.mozilla.org/fr/firefox/ ne télécharge qu’une police de 32KB (subset de Inter) alors que https://addons.mozilla.org/el/firefox/ télécharge aussi la version non subset de Inter (160KB).
L’URL de la font indique les locales pour lesquelles le subset fonctionne. Dans la CSS, tu peux voir la déclaration (un peu complexe) de unicode-range pour informer le navigateur où il pourra trouver le fichier selon les glyphes à afficher.
=> More informations about this toot | More toots from anthony@indieweb.social
@anthony @ffoodd le code est opensource et ya même de la doc, au passage :) https://github.com/mozilla/addons-frontend/blob/master/docs/fonts.md
=> More informations about this toot | More toots from dioxmat@mastodon.social
@dioxmat @anthony Waouh, super ressource : merci !
Ça correspond bien à ce que j’avais en tête, unicode-range en CSS n’est qu’un hint pour le navigateur : le vrai travail se fait en amont en générant la fonte avec le bon subset.
=> More informations about this toot | More toots from ffoodd
@ffoodd @anthony accessoirement j'avais essayé de générer de multiples subsets qui se chevauchaient en espérant que les navigateurs arriveraient à bien gérer ça mais à l'époque en tout cas, c'était pas terrible, on se retrouvait avec des polices téléchargées pour rien
=> More informations about this toot | More toots from dioxmat@mastodon.social
@dioxmat @ffoodd Effectivement, super resource ! Des gens pourraient même inciter à tourner ça en article ou sujet de conférence 😉
=> More informations about this toot | More toots from anthony@indieweb.social
@anthony @ffoodd c'est pour les jeunes qui ont du temps et de la motivation ça :)
=> More informations about this toot | More toots from dioxmat@mastodon.social
@dioxmat @anthony ou les vieux qui cherchent un nouveau souffle 🤭
=> More informations about this toot | More toots from ffoodd This content has been proxied by September (3851b).Proxy Information
text/gemini