TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #249 4.36K
Уроки, полученные от 222 557 шрифтовых сабсетов

Стоян Стефанов задался вопросом: сколько можно экономить на размере файлов шрифтов, если оставлять в них не просто диапазон символов (латинские, кириллические и так далее), а только нужные на странице. И ответить на него решил при помощи исследования.

Он взял 1009 шрифтов из гитхаба Google Fonts, при помощи fontkit исследовал, какие глифы есть в каждом из шрифтов, затем, используя Glyphhanger, сгенерировал 222 557 отдельных файлов шрифтов, чтобы в них было от 1 до N глифов. Заморочился, конечно, знатно, но зато в статье можно найти примеры скриптов, как можно так же заморочиться.

В итоге Стоян опытным путём выяснил, что каждый глиф в среднем весит 0.1 KB, то есть если вы используете какой-то шрифт только для заголовков на статическом сайте, то есть смысл оставить только нужные символы. И если у вас нет кириллицы на сайте в принципе, то её имеет смысл вынести в отдельный сабсет.

Почему не убрать целый набор символов совсем? Потому что есть браузерный автоперевод, когда текстовый контент всё равно меняется на те символы, которые вы не предусмотрели. И если вы хотите, чтобы было красиво, то лучше оставить возможность докачать шрифт. Но чтобы не грузить всё сразу, unicode-range вам в помощь — браузер скачает только то, что есть на странице в виде символов.

https://www.phpied.com/lessons-learned-from-222557-font-file-subsets/
phpied.com Lessons learned from 222,557 font file subsets? Earlier this year I wondered how many KB is "normal" for a web font file size (spoiler 20-ish KB). I finished the post questioning how much subsetting really helps, meaning how much do you save from painstakingly choosing which characters should stay in the…
  • ❤ 21
  • 🤔 7
  • 👍 3
  • 🔥 3
  • 🐳 1
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →