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

Question

[Hikky]

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

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

Answer 1

[Steppp]

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

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

Comments

[Vladislav]

Steppp верно говоришь

[Steppp]

Хоть отметьте решено или нет???

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

@font-face  {
  font-family: "SFPro";
  font-display: swap;
  src: url("../fonts/SFProDisplay-Bold.woff") format("woff"),
       url("../fonts/SFProDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face  {
  font-family: "SFPro";
  font-display: swap;
  src: url("../fonts/SFProDisplay-regular.woff") format("woff"),
       url("../fonts/SFProDisplay-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face  {
  font-family: "SFPro";
  font-display: swap;
  src: url("../fonts/SFProDisplay-lite.woff") format("woff"),
       url("../fonts/SFProDisplay-lite.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

html {font-family: "SFPro";}

h1 {font-weight: 700;}

p {font-weight: 400;}

span {font-weight: 300;}

Answer 2

[Вова Дружаев]

А еще выкидываешь изнутри шрифта неиспользуемое - всякие ненужные символы, буквы вязи и языки, например, если не используешь украинские 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 что не важно было? Важно.