Ускоряем загрузку шрифтов для вашего сайта
Самый быстрым способом подключения шрифтов на страницу является тег <link>, но если нужно гибко настроить, тогда @font-face. Про @import забудьте.
Лучший способ подключения шрифтов на страницу — использование директивы @font-face со свойством font-display. Данный дескриптор требует Page speed.
Здесь все о веб типографике - смотреть
Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:
| Формат файла шрифта | Какие браузеры поддерживают |
|---|---|
| TTF | Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0 |
| EOT | формат поддерживается только старыми IE и также много весят. |
| WOFF | формат разработанный компанией Mozilla, имеет меньший вес, но также поддерживает настройки. |
| WOFF2 |
аналогичен формату woff, но легче примерно на 30%. |
| SVG | формат самый объемный из всех, в 2–3 раза тяжелее остальных форматов и поддерживается только старыми safari. |
* В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.