Давным-давно каждый сайт использовал для отображения текста только такие шрифты, как Arial, Verdana, Garamond или Times New Roman, потому что только эти шрифты наверняка были установлены почти на любом компьютере. Но эти времена позади. Веб-шрифты распространяются по всему интернету, но мы все еще толком не знаем, как загружать их эффективнее.
Эта статья – моё простое руководство о том, что делать, чтобы предложить оптимальный пользовательский опыт без необходимости избегать «дорогих украшений» (ака веб-шрифтов)
0. Если лень читать полностью
Суть метода:
- Используем шрифты только в формате woff
- Другие браузеры получает старые «безопасные» шрифты
- Загружаем шрифт в бинарном формате и оптимизируем его
- Отдаем шрифты сами
- Отдаем их в качестве CSS-файлов – URIs с закодированными в base64 данными
- Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage
- Иначе загружаем его из localStorage без обращения к серверу.
- Радуемся, потому что ваш сайт отображается намного быстрее, а ваши пользователи получают намного больше удобства
Для тех, кто всё ещё читает, вот мои разъяснения, насчет верхних пунктов.