Какой вариант подключения шрифтов оптимален?

@Hikky

В 2021 году важную роль играет скорость загрузки сайта, поэтому возник следующий вопрос:
Какой самый оптимальный вариант подключения к сайту шрифта?

1. Если есть такая возможность, через Google Fonts;
2. Через @font-face в любом случае;
3. Отложенная загрузка с помощью JS;
4. Другой вариант.

Решения вопроса 0

Ответы на вопрос 2

@Steppp

Качаешь шрифты откуда угодно,
Конвертируешь в woff woff2
Кидаешь в проекте в папку fonts
И подключаешь их из папки

Это самый оптимальный вариант!

@OtshelnikFm

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

Было у меня:
Исходные данные шрифта Roboto в байтах:
roboto-300.woff — 28192
roboto-300.woff2 — 21908
roboto-400.woff — 28188
roboto-400.woff2 — 21968
roboto-500.woff — 28676
roboto-500.woff2 — 22456

В финале я получил:
roboto-custom-300.woff — 18648
roboto-custom-300.woff2 — 14144
roboto-custom-400.woff — 18728
roboto-custom-400.woff2 — 14244
roboto-custom-500.woff — 18732
roboto-custom-500.woff2 — 14172

В байтах. Т.е. в некоторых случаях мы получили на 35% меньший размер!

Гугли: WebOverclock otshelnik-fm

В 2021 году важную роль играет скорость загрузки сайта

а в 2020 что не важно было? Важно.

Похожие записи:

Добавить комментарий Отменить ответ