В большинстве моих проектов были такие требования к подключению шрифта:
- Он должен храниться локально. Соответственно, не использовать Google Fonts или другие источники (во избежание блокировок, а так же для ускорения загрузки)
- Для максимальной экономии использовать формат .woff2
- Для шрифтов, поддерживающих Variable-параметры, брать именно такую версию (объединяем в один файл варианты жирности с 100 по 900)
Схема была довольно рабочей: сначала скачать нужный шрифт с Google Fonts как .ttf, а затем конвертировать его с помощью плагинов, или онлайн-сервисов в .woff2. А далее просто хранить в статичной папке /fonts, и подключать в CSS.
В чем же дело?
Однако в случае с довольно популярным шрифтом Inter, это вызвало большую проблему.
Файл .ttf с обычным начертанием занимает 855кб, а с курсивом ещё 884кб. После конвертации в .woff2 получается 341кб у простого и 376кб у курсива. Итого, 341+376=717кб на один только шрифт!
| Файл | .ttf | .woff2 |
|---|---|---|
| Regular | 855 КБ | 341 КБ |
| Italic | 884 КБ | 376 КБ |
| Итого | 1.7 МБ | 717 КБ |
Разумеется, скорость загрузки сразу подает в пропасть, как и все рейтинги PageSpeed. Так получается из-за того, что современные и максимально навороченные шрифты могут содержать множество различных параметров, таких как Optical Size (opsz), а так же поддержку множества языков, включая греческий и вьетнамский. С практически 100% вероятностью вы не будете использовать эти лишние символы, но они уже включены в файл.
Найдено элегантное решение
В качестве решения было предложено использовать сервисы, которые будут вырезать все лишние символы, оставляя только латиницу, кириллицу и базовые символы. Однако, это долго, и совсем не то, чем хочется заниматься frontend-разработчику.
Но была найдена и другая альтернатива, которая подойдёт большинству сайтов. По крайней мере для тех, которые используют сборщик вроде Vite или Webpack. Достаточно установить npm-библиотеку @fontsource-variable/inter, подключить шрифт в корневом файле сайта:
import '@fontsource-variable/inter'
import '@fontsource-variable/inter/wght-italic.css'Если курсив не нужен, то wght-italic.css не подключаем.
И применить шрифт в CSS:
body {
font-family: 'Inter Variable', system-ui;
}Под капотом
Библиотека сама нарезает шрифт на несколько файлов, содержащих различные символы. В моём примере получилось 7 файлов: 2 для кириллицы, 2 для греческих символов, 2 для латиницы и 1 для вьетнамского. К CSS автоматически вставляется код вида:
@font-face {
font-family: Inter Variable;
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/_astro/inter-cyrillic-wght-normal.DqGufNeO.woff2) format('woff2-variations');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}Мы можем видеть, что через unicode-range определяется набор символов. При использовании на сайте этих символов будет загружен соответствующий им файл шрифта.
В моём случае подгрузились 2 файла inter-latin-wght-normal 47кб и inter-cyrillic-wght-normal 18кб. Итого, 47+18=65кб против первоначального файла в 341кб. Если на странице есть курсив, то скачивается ещё 2 файла 52кб и 20кб. Но в обоих вариантах получается экономия более чем в 5 раз!
Выводы
| Способ | Размер | Кол-во запросов |
|---|---|---|
| Ручной .ttf (Inter Regular) | 855 КБ | 1 |
| Ручной .ttf (Inter Regular + Italic) | 1.7 МБ | 2 |
| Ручной .woff2 (Inter Regular) | 341 КБ | 1 |
| Ручной .woff2 (Inter Regular + Italic) | 717 КБ | 2 |
| @fontsource (латиница + кириллица) | 65 КБ | 2 |
| @fontsource (латиница + кириллица + Italic) | 137 КБ | 4 |
Пока никаких подвохов не вижу. Крайне рекомендую именно такое подключение шрифта! Таким образом, использование библиотек @fontsource-variable не только упрощает разработку, но и критически улучшает производительность за счет встроенной поддержки unicode-range и Variable-формата. Это лучший вариант для современных проектов.