​🔥 Большинство сайтов неправильно загружают шрифты

​🔥 Большинство сайтов неправильно загружают шрифты.

И это убивает производительность, доступность и юзабилити.

Большинство до сих пор:

❌ Загружают мегабайты глифов, которые никто никогда не использует

❌ Отдают TTF/WOFF "на всякий случай"

❌ Отдают типографику на аутсорс в Google Fonts (привет, риски GDPR)

❌ Используют иконочные шрифты, как будто на дворе 2010 год

❌ Делают вид, что фолбэки не имеют значения

А разработчики тем временем ломают голову, почему проседают показатели Core Web Vitals.

👉 Джоно Алдерсон только что опубликовал бескомпромиссный разбор того, как на самом деле загружаются шрифты в браузерах — и почему почти все "лучшие практики", которые вы видели, неверны.

Ссылка: https://www.jonoalderson.com/conjecture/youre-loading-fonts-wrong/

Если вы когда-либо говорили: "Все нормально, мы просто используем Google Fonts", — этот материал для вас.

Веб-шрифты — это не украшение.

Они влияют на юзабилити, производительность, доступность и даже на юридические аспекты.

Тем не менее, в большинстве случаев к ним по-прежнему относятся как к чему-то второстепенному — прикручивают в последний момент, раздувают устаревшим багажом и ломают пользовательский опыт из-за такой базовой вещи, как текст.

Так быть не должно.

Правильно работать со шрифтами просто, если относиться к ним с той же серьезностью, что и к JavaScript, кэшированию или аналитике.

Принципы:

— Сначала система: начинайте с надежного системного стека. Кастомные шрифты — это прогрессивное улучшение, а не костыль.

— Агрессивный (но умный) сабсеттинг: отдавайте только то, что нужно пользователям, и тестируйте на поддерживаемых языках.

— Preload и инлайн: не прячьте критически важные правила @font-face и не откладывайте запросы.

— Только WOFF2 (в 99% случаев): избавьтесь от балласта устаревших форматов.

— SVG для иконок: оставьте иконочные шрифты в прошлом, где им и место.

— Вариативные шрифты, когда они приносят пользу: один гибкий файл лучше семейства статичных начертаний.

— Проектируйте фолбэки: настраивайте метрики так, чтобы системный стек не ломал верстку.

— Учитывайте глобальные системы письма: оптимизируйте по-разному для арабского, CJK, RTL и эмодзи.

— Тестируйте так, как будто это действительно важно: разные устройства, разные сети, разные локали.

Речь не о погоне за чистотой кода или малопонятных микрооптимизациях.

Речь о создании веба, который быстро рендерится, хорошо выглядит и работает везде.

Шрифты — это контент.

Шрифты — это бренд.

Шрифты — это пользовательский опыт.

Если вы все еще относитесь к ним как к "просто еще одному ассету", вы загружаете их неправильно.

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/5601...