Оптимизировать размер файла шрифта можно

Обновлено: 05.07.2024

Как правильно подключить собственные шрифты и не навредить скорости сайта? Разбираем конкретные шаги, которые позволят это сделать.

1. Правильное подключение

Собственные шрифты сайта, скорее всего, отсутствуют в браузере пользователя. Поэтому необходимо указать дополнительные к загрузке файлы, в которых будет содержаться техническая информация о начертании шрифтов (символы — глифы, особенности совместного начертания символов и строк и другие данные). Как это часто бывает, для каждого браузера нужен свой файл — Google Chrome понимает формат woff и woff2 (наиболее продвинутые), старый Android понимает только TTF, а IE — eot.

Дополнительно можно учесть, что в редких случаях шрифт может быть уже установлен на устройство пользователя: в этом случае можно использовать директиву local. Развернутая CSS инструкция, подключающая соответствующий шрифт на сайте, будет выглядеть примерно так (используем различные форматы для «попадания» в разные браузеры):

@font-face <
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format('woff'),
url('/fonts/awesome.ttf') format('ttf'),
url('/fonts/awesome.eot') format('eot');
>

В этом случае все файлы шрифтов размещаются на хостинге. Для поддержки всех браузеров обычно используется набор файлов шрифтов для каждого начертания (гарнитуры). Его можно создать, например, через Font Squirrel : сервис автоматически предоставит CSS-код и набор файлов для размещения на сервере.

В качестве альтернативного варианта можно использовать сервис Google Fonts : вы вставляете вызов скрипта сервиса на сайт, а в зависимости от используемого браузера сервис уже отдает соответствующий CSS-код и файлы шрифта (уже с разбиением по языкам), поддерживая более 30 разных комбинаций.

2. Обратная совместимость шрифтов

Для максимального ускорения отображения текста вашего сайта на любом пользовательском устройстве вы должны сообщить браузеру, какой запасное семейство шрифтов можно использовать, если ваш собственный шрифт недоступен (не загрузился еще или загружается неподдерживаемый формат). Для этого в директиве font-face после названия вашего шрифта нужно указать наиболее подходящую системную альтернативу с обязательным окончанием serif (шрифт с засечками), sans-serif (без засечек) или monospace (равной ширины). Хотя обратная совместимость приводит к FOUT, но эта альтернативна лучше, чем невидимый на сайте текст (FOIT).

Но основную проблему с загрузкой собственных шрифтов это не решает: шрифты большие. Иногда слишком большие. И почти всегда они требуются, чтобы отобразить текст на странице (т.е. загрузка шрифта идет на стадии «белого экрана», максимально раздражая пользователей). Как это вылечить?

3. Инвентаризация шрифтов

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

Оптимизация размера шрифтов состоит из трех базовых вещей: обеспечить обратную совместимость, включить сжатие и устранить неиспользуемые глифы. Перед проведением оптимизации конкретных файлов нужно пересмотреть набор используемых нестандартных шрифтов и оставить только те, которые реально нужны для сайта.

4. Использование Google Fonts API

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

Google Fonts API позволяет загрузить только нужные варианты щрифта, а также загружает шрифты по наборам символов (позволяет браузерам не загружать полностью шрифт, если не все глифы требуются для отображения страницы). Среди дополнительных возможностей стоит отметить и параметр text=, который обрезает символы в загружаемом шрифте строго до заданных (если шрифт используется только для логотипа, это может быть очень ценно).

5. Уменьшение размера шрифтов

Если вы используете статическое сжатие, то достаточно подготовить архивы с файлами шрифтов и разместить их рядом с файлами шрифтов. При динамическом сжатии проверьте, что все основные форматы шрифтов — EOT, TTF, OTF, SVG, WOFF и WOFF2 — отдаются с хостинга сжатыми ( проверка сжатия ). Если это не так, то нужно добавить требуемые расширения или типы файлов в правила сжатия. Gzip ( или zopfli ) сжатие позволяет сократить размер шрифтов на 15-50%.

6. Удаление глифов

Для отображения текста на сайте обычно требуются далеко не все символы, включенные в шрифт по умолчанию. Часть из них относится к другому языку (например, к китайскому), часть — к специальным символам, которые вы не используете. Существует большое количество инструментов для удаления из шрифтов неиспользуемых глифов и утилиты по Windows / Mac. Наиболее популярные — это сервис Font Squirrel (в режиме Advanced), а также Subset.py и FontPrep . Также Google Fonts позволяет загружать только используемые наборы символов. Этот метод оптимизации позволяет сократить результирующий файл еще на 10-50%.

7. Кэширование шрифтов в браузере

Есть несколько подходов, позволяющих применить некоторую «магию» к загрузке шрифтов, чтобы до минимума снизить негативные эффекты.

Первое – это жесткое кэширование файлов (для обычных пользователей) и base64-представления (в localStorage, для мобильных пользователей). Прием работает только для вернувшихся на сайт пользователей, но для них позволяет существенно сократить время загрузки ( Детальная инструкция по использования localStorage).

8. Font Loading API

Второе – использование Font Loading API (поддерживается не всеми браузерами). При первичной загрузке страницы можно показать текст в установленном у пользователя шрифте, асинхронно загрузить нужный шрифт – и потратить несколько десятков миллисекунд (почти невидимое «подвисание» браузера) на перерисовку страницы по готовности шрифта. Существуют библиотеки для автоматизации процесса, одна из них представлена здесь .

9. Предзагрузка шрифтов

Для более глубокого погружения в тему рекомендую к прочтению статью от Google на тему оптимизации шрифтов.

Требования к инструментарию:

на выходе должен получаться минимальный размер файлов (скармливать инструменту набор символов, которые нужно оставить в шрифте),
отсутствие деформаций символов после конверсии,
работа с форматами TTF, WOFF/WOFF2,
кроссплатформенность,
бесплатность,
локальность (не веб-сервис).

Рассматривать буду все в разрезе использования консоли и nodejs/npm. Если вы еще не начали использовать консольные инструменты, самое время начать.

Оптимизация шрифта

Задача: оставить в шрифте только те символы, которые необходимы на проекте. В моем случае, это цифры, латиница, кириллица (не целиком) и некоторые другие (кавычки, тире и т.п.) символы.

Для этих целей обнаружил три инструмента:

— набор консольных инструментов, в т.ч. инструмент, оставляющий в файле шрифта только символы с указанными utf-кодами. — бесплатный редактор шрифта (полноценный редактор с GUI). — набор китайских инструментов (есть консольные варианты, вебсервис и приложение с GUI).

fonttools

Лучший из найденных инструментов. Требует установленного Python. Ставим инструмент и потом в консоли:

fonts/Roboto-Black.ttf — исходный файл,
fonts/Roboto-Black--pyftsubset.ttf — результат,
codes.txt — файл с кодами символов, которые нужно оставить в шрифте (пример, получить свой набор можно любым конвертером символов).

Результат для TTF:

212 Кб → 25 Кб. 319 Кб → 62 Кб. 158 Кб → 33 Кб. 156 Кб → 33 Кб. 166 Кб → 35 Кб.

После конвертации в WOFF и WOFF2 размеры файлов становятся еще приятнее.

Из обнаруженных минусов:

Пропущенные через инструмент шрифты при открытии стандартным инструментом просмотра шрифтов (по кр. мере, на Windows) выдают ошибку (браузер переваривает их корректно).
Я получил файл нулевой длинны для одного из конвертируемых шрифтов. Странный глюк с неизвестной причиной (пришлось использовать fontforge).

fontforge

Бесплатное кроссплатформенное ПО для редактирования шрифтов, в т.ч. можно выделить и очистить площадки символов, которые не нужны на проекте, радикально уменьшив размер файла.

Увы, мною не были обнаружены адекватные инструменты автоматизации, позволяющие поточно обработать несколько файлов по одной маске. А выделять символы вручную — минут по 5-7 на файл — не хочется категорически. Если подскажите способ сохранить выделение символов или как-то консольно вызвать fontforge, чтобы от взял ttf-файл, вырезал символы и сохранил, буду благодарен.

fontmin

Устанавливаем глобально и потом в консоли можно:

subset.txt — файл с символами, которые хочется оставить в шрифте (пример),
fonts/lato.ttf — исходный файл,
fonts/lato--fontmin.ttf — результат.

Одна беда: fontmin вырежет все пробелы. Либо оставит, но подпортит ширины символов. Поскольку пробельные символы могут сильно отличаться в разных шрифтах, диагноз: малоюзабельно.

Чем больше шрифтов (и их начертаний) используется на странице сайта, тем дольше браузер загружает файлы шрифтов и интерпретирует их стили.

На быстрых сайтах обычно используется 1–3 разных шрифта с 3–4 начертаниями каждый.

Между тем многие сайты позволяют себе 5–8 шрифтов без ограничения числа начертаний. На деле это приводит к задержке в загрузке страниц на 2–5 секунд и скачиванию 2–5 Мб дополнительных данных. Тогда как страница должна загружаться за 1–3 секунды и иметь общий объем данных до 2 Мб.

Правило о количестве шрифтов очень простое: если ваш сайт не посвящен шрифтам, то их многообразие никому не нужно.

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

Часто у шрифтов бывают отдельные файлы начертаний (font-style, font-weight), которые различаются по толщине, размеру и наклону символов. Они могут называться как словами (regular, italic), так и цифрами (300, 900). Необходимо следить, чтобы на странице подгружались только используемые начертания, при этом минимизировав их количество (3-5 обычно достаточно).

С этим придется повозиться, так как не всегда понятно, «кто» подтягивает конкретный шрифт.

Очень упрощенно стандартная цепочка возникновения на странице шрифта выглядит так:

блоку с текстом назначен класс <div >
в одном из .css файлов этому классу прописано свойство font-family с названием шрифта
.text-1
отдельно (чаще всего) существует .css файл с описанием конкретно этого шрифта и ссылками на файлы шрифта
@font-face
При этом перечисленные .css тоже вызываются ссылками в других файлах.

Прервать эту цепочку и тем самым избежать загрузки конкретного файла шрифта можно на любом этапе, но чтобы при этом не появились ошибки в консоли (и не остались лишние запросы), лучше редактировать стиль оформления блока. То есть нужно найти все упоминания неприемлемого названия и заменить на нужные вам. Грубо говоря, если на странице используются шрифты Poppins и Roboto, а вы хотите избавиться от Poppins-а, то меняйте значение font-family с Poppins на Roboto.

Где искать? Посмотрите, в каком блоке используется шрифт, в какой папке находится файл стилей шрифта, поищите файл с названием шрифта или просмотрите список файлов .css в консоли (вкладка Network). Способов поиска много, включая поиск по содержимому файлов (скачайте сайт себе на диск, установите Notepad++ и сможете искать внутри файлов).

В случае использования внешних шрифтов (чаще всего Google Fonts) вам нужно искать не файл стилей, а строку запроса к нему. А после нахождения — удалить или закомментировать ее. Закомментировать (превратить в текстовый комментарий) в зависимости от формата файла можно одним из методов:

PHP, CSS: /* style */
HTML:

В принципе, вы можете обойтись и без поиска в файлах, прописав замену с пометкой «важно»:

Правда, придется перечислить все классы, где шрифт используется. Но если вы оставляете на сайте только один шрифт, то стиль можно прописать всему сайту всего одной строкой:

Последние два способа стоит использовать только по причине большой лени или отсутствия доступа к нужным файлам. Дело в том, что задавленные «авторитетом» !important стили продолжают загружаться и обрабатываться браузером, они тянут на себя время, а нередко уже имеют свою важность, которую «перебить» нельзя.

Подбор шрифтов

Много раз я сталкивался с сайтами, которые используют некорректные наборы шрифтов. По моим наблюдениям, такую ошибку в первую очередь допускают разработчики, которые делают сайты на англоязычных шаблонах и не утруждают себя такими мелочами как проверка шрифтов и корректный перенос сайта на сервер заказчика (это отдельная тема).

Самая частая ошибка — это загрузка шрифта, который не поддерживает текущий язык сайта.

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

Вы можете воспользоваться расширением браузера Chrome под названием Font Finder. Для этого нажмите на значок расширения на панели браузера и потом кликните на один из текстовых блоков сайта. В появившемся окне инспектора ищите строку «Font being Rendered» (какой шрифт используется). Название шрифта должно совпадать с названием семейства шрифтов (font-family, на строку выше). Справа при этом могут быть такие отметки: local (использован шрифт на вашем ПК), remote (шрифт загружен извне). Идеальный вариант — remote — стили шрифта работают корректно. Если local, но название шрифта и семейства совпадают, то используется правильный шрифт, однако он подгрузился из вашего кеша. Если указаны два названия, то шрифт надо менять.

Часто неподходящие шрифты видны и невооруженным глазом — написание латиницы и кириллицы разительно отличаются.

Как решается описанная выше ситуация? Заменой неподходящих шрифтов на соответствующие языку контента сайта (примерный порядок действий описан выше). В редких случаях вы можете найти такой же шрифт с поддержкой нужного языка и использовать его.

Некорректным является и использование расширенных версий шрифтов без необходимости. Причем замечание касается как текстовых шрифтов, так и символьных.

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

Что касается символьных шрифтов (fontawesome, modules, revicons и т. п.), то, к примеру, шрифт от FontAwesome содержит 700–1000 иконок, хотя обычно используются 5–50 иконок. Удалив лишние иконки в шрифте с помощью специализированного редактора (например, High-Logic FontCreator), вы будете приятно удивлены изменением размера файла.

Размещение шрифтов

Загружать шрифты с Google, CDN или, наоборот, перенести их на свой сервер? На этот вопрос нет и не может быть однозначного ответа.

Изначально надо учитывать ограничения браузеров на количество одновременных загрузок с одного IP. Их в лучшем случае шесть.

Также не забывайте о возможностях, вернее, ограничениях своего тарифа на хостинге. И наконец, важно, чтобы файлы физически находились как можно ближе к посетителю страницы. Другими словами, нерационально отдавать 20 шрифтов с недорогого хостинга в Украине, если сайт предназначен для пользователей в США.

Итого, ориентируйтесь на замечания Google и здравый смысл. Общие рекомендации таковы:

1. Сайт с устоявшимся дизайном и небольшим количеством шрифтов — загружаем шрифты со своего сервера.

2. Сайт с большим количеством шрифтов — загружаем шрифты извне.

3. Сайт с плавающим дизайном, читай, набором шрифтов (постоянные доработки и «улучшения»), да еще и с визуальным редактором — шрифты только внешние.

4. Есть модифицированные или собственной разработки шрифты — такие шрифты загружаем с сервера.

Формат файла шрифта

Это отдельная тема для выражения негодования. Меня приводит в ступор размер подгружаемого шрифта под 200 Кб. А все потому, что он в формате ttf. На веб-сайтах используются такие форматы шрифтов: eot, ttf, svg, woff, woff2. Ради интереса посмотрите сравнительную таблицу поддержки форматов шрифтов браузерами.

На скриншоте ниже вы можете увидеть размеры уже оптимизированных файлов одного шрифта. Формат woff2 в три раза «легче», чем ttf. Вывод очевиден. Ваша задача проверить наличие файлов используемого на сайте шрифта в самых «легких» форматах (woff, woff2), а также правильность их записи в CSS.

Показ при загрузке

«Настройте показ всего текста во время загрузки веб-шрифтов» — одно из важных замечаний PageSpeed Insights. Расшифровывается это просто: текст не отображается на странице, пока не загрузится файл шрифта. То есть какое-то время посетитель вынужден «пялиться» на белый экран.

Решается эта проблема добавлением свойства «font-display:swap» в стили шрифта, благодаря чему до загрузки файла вашего шрифта текст отображается системным шрифтом. Самое сложное — найти файлы, где эти самые стили прописаны (см. выше).

Обычно CSS-файл, описывающий откуда и как загружать шрифт, «лежит» рядом со шрифтом, на уровень выше или в соседней директории. Определить нужный файл вы можете по наличию правила font-face, в котором будут прописаны пути к файлам шрифта. Именно внутрь этого правила и нужно вставить «фонт-дисплей».

Новое свойство практически не искажает отображение текстовых шрифтов, однако будьте готовы к тому, что символьные шрифты временно будут отображаться квадратиками. Поэтому в ваших интересах обеспечить загрузку страницы менее чем за 3 секунды.

А что же делать с внешними шрифтами, стили которых находятся тоже на далеком Гугле, а значит, редактировать их не получится…

Вам нужно добавить параметр (касается только Google-шрифтов) в конец строки адреса, чтобы получилось:

Сделать эту правку вы можете непосредственно в файле, где записан этот адрес. Если же у вас сайт на Вордпресс, то попробуйте один из соответствующих плагинов.

Предзагрузка шрифтов

Когда шрифты задерживают рендеринг страницы, и их загрузка является одним из основных замедляющих факторов, Google советует «Настроить предварительную загрузку ключевых запросов», то есть перенести шрифты в начало очереди на загрузку. Выполнить эту рекомендацию несложно, но.

Google предлагает предзагрузить конкретный файл(ы), в конкретном формате (woff2 обычно). Само собой, этот же файл будет загружаться и в браузерах, не поддерживающих woff2 (помимо файла в понятном браузеру формате). И «предзагружаться» шрифт будет на всех страницах сайта, даже если он там не используется. Наконец, предзагрузка шрифтов откладывает загрузку остального, не менее важного контента. Ваше решение должно быть взвешенным.

Конечно, можно заморочиться и прописать условия предзагрузки в зависимости от страницы, но оно вам точно надо?

Предзагрузить шрифт можно плагинами (Вордпресс) или по старинке, прописав код в хедере сайта.

Обратите внимание на версию файла (?v=4.5.0). Если Google в своем замечании показывает адрес шрифта с версией, значит в preload нужно использовать ее. Иначе браузер дважды загрузит один и тот же файл.

Счастливые обладатели сайтов на Вордпресс имеют возможность настроить preload в functions.php.

add_action( 'wp_head', function () <
$fonts_dir = get_template_directory_uri() . '/fonts/';?>
<link rel="preload" href="<?php echo plugins_url( '/fonts/roboto.woff' ); ?>" as="font" type="font/woff" crossorigin>
<?php > );

Продолжим затронутую тему блокировки рендеринга шрифтами. Допустим, вы уменьшили размер файлов шрифтов и их количество, добавили «фонт-дисплей», а неблагодарный Google пишет «Устраните ресурсы, блокирующие отображение», и среди таких ресурсов указан css-файл шрифта… Иногда файл лежит на сервере, но чаще всего это будет запрос к Google-шрифтам. Общеизвестный, хоть и спорный способ сделать загрузку шрифтов асинхронной — это предзагрузить стиль с неверным типом содержимого, а после загрузки страницы изменить тип. Способ подробно расписан здесь.

Полезное

В завершение поделюсь ссылками на несколько полезных ресурсов.

Google Fonts — здесь можно выбрать Google-шрифты и получить правильную ссылку на внешний CSS-файл. Если вам захочется перенести эти шрифты на свой сервер, то не копируйте «font-face» гугловского файла – он содержит ссылки на шрифты только в формате для вашего браузера.

Transfonter — прихо́дите сюда с одним файлом шрифта, а получаете: архив со шрифтом во всех форматах + корректный CSS.

google-webfonts-helper — незаменимый сайт для переноса Google-шрифтов на сервер, полноценный конструктор.

И еще один совет: бэкапы.

Всегда делайте бэкапы всеми доступными инструментами, потому что бывает, что конкретный бэкап по какой-то причине может не восстановиться.

Я взял себе за правило делать до начала работ на Вордпресс-сайте два-три бэкапа: плагинами Updraft и Duplicator, а также резервную копию на сервере. Почему три? Перестраховка. Редко попадаются сайты без ошибок, написанные ровными руками. Один раз мне особенно не повезло — я столкнулся с сайтом, где оба бэкапа отказались восстанавливаться как положено. В итоге я потратил весь день на восстановление сайта вручную.

От редакции. Спасибо Константину за то, что поделилися практической информацией. Если у вас остались вопросы, задайте их под статьей, а если вам есть, что рассказать нашим читателям, отправляйте заявки на публикации!

Слабым местом веб-шрифтов является производительность, однако ситуация постепенно меняется в лучшую сторону: появляются более совершенные методы сжатия, улучшается поддержка браузерами, unicode, отдельные наборы шрифтов и т.д.

Оптимизация

На первый взгляд использовать веб-шрифты очень просто — достаточно скачать необходимый набор и подключить его на странице. Но на деле все немного сложнее. Существует четыре разных формата:

(Web Open Font Format): открытый сжатый формат шрифта OpenType или TrueType, поддерживающий дополнительные метаданные. : всем знакомый, старый добрый TrueType. (Embedded OpenType): компактный формат OpenType-шрифтов. (Scalable Vector Graphics): формат векторной графики (об это я уже писал).

К примеру шрифт Open Sans — один из самых популярных Google Web Fonts, включающий все языки, весит 217 килобайт, но размер можно уменьшить, если использовать только один набор — latin. тогда размер уменьшится до 36 килобайт:

Вот, как можно подключить только часть шрифта (latin):

Размер файла может быть снижен, если удалить дополнительные метаданные Font-хинтинга для браузеров, где эта технология не поддерживается. Font-hinting — часть процесса растеризации шрифта, используется для улучшения отображения текста на странице.

Улучшенные алгоритмы сжатия позволяют сократить размер файла на 15%, а ожидаемый в скором будущем формат WOFF 2.0 позволить сжимать на 30% лучше.

Для подключения только части символов («H», «e», «l» и «o») можно использовать следующий код:

Использование

Все шрифты из Google Web Fonts являются открытыми, что позволяет успешно использовать межсайтовое кэширование. Например упомянутый выше Open Sans используется на более чем миллионе сайтов, а это значит, что для увеличения производительности можно кэшировать шрифт в браузере пользователя при посещении предыдущих сайтов с данным шрифтом.

Вот как это работает:

CSS-стили, используемые в сервисе Google Web Fonts являются динамическими: они автоматически определяют подходящий формат для конкретного пользователя и его браузера. CSS-стили кэшируются на 24 часа. Внутри стиля находится ссылка на сам файл шрифта. Кэш самого шрифта хранится целый год! Учитывая популярность веб-шрифтов, очевидно, что в кэше уже есть копия того же Open Sans.

Существует также полезный инструмент — Javascript Font Loader от Google, позволяющий отображать процесс загрузки веб-шрифтов. Использовать достаточно просто:

А javasript обрабатывает действия:

В заключение, небольшая сводная таблица скорости загрузки одного и того же шрифта (Open Sans) при использовании различных сервисов и браузеров (числа в мс):

Вывод

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

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью правила @font-face

Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.

После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:

Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.

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

Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

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

Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :

Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

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

Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

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

Полезности

Подключение шрифтов — часть вёрстки

А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.

Читайте также: