Нужно ли в head помещать все типы шрифтов для preload?

Question

[tostershmoster]

Сейчас там только woff2

<link
  rel="preload"
  as="font"
  href="/fonts/Roboto-Regular.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>

Если смысл добавлять для preload тот же шрифт в формате woff?

<link
  rel="preload"
  as="font"
  href="/fonts/Roboto-Regular.woff"
  type="font/woff"
  crossorigin="anonymous"
/>

Comments

[Aetae]

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

[tostershmoster]

Aetae, А зачем браузерам загружать те форматы шрифтов которые они не будут использовать?

[Aetae]

tostershmoster, а почему бы нет? Современные браузеры поддерживают и старые форматы. И при использовании preload, в отличие от font-face, они не могут знать какой именно шрифт они грузят, а потому вынужденны грузить всё.

[tostershmoster]

Aetae, почему они не могут знать какой именно шрифт они грузят? Preload же они понимают. Почему бы им так же не спарсить форматы шрифтов и после этого загрузить наилучший вариант?

[Aetae]

tostershmoster, потому что по ссылке не понять что это за шрифт.
Попробую нагляднее показать:

<link href="/fonts/MyFont.woff2" ... />
<link href="/fonts/MyFont.woff" ... />
<link href="/fonts/MyFont.ttf" ... />

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2'),
  url('/fonts/MyFont.woff') format('woff'),
  url('/fonts/MyFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Тоже самое что:

<link href="/fonts/a.woff2" ... />
<link href="/fonts/b.woff" ... />
<link href="/fonts/c.ttf" ... />

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/a.woff2') format('woff2'),
  url('/fonts/b.woff') format('woff'),
  url('/fonts/c.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Браузер никак не может знать, что в preload a.woff2, b.woff и c.ttf - это один и тот же шрифт, для него это просто три разных файла.
Когда он спарсит font-face - там да, уже понятно, но preload на то и preload, что грузит заранее.

[Сергей delphinpro]

не нужно

Answer 1

[Lynn «Кофеман»]

Не нужно и не имеет никакого смысла. Даже скорее сделает хуже.

Все браузеры которые понимают rel="preload" поддерживают woff2.
Т.е. добавив в предзагрузку woff ты заставишь их скачать ненужный файл.
А те браузеры которым нужен именно woff всё равно не поддерживают предзагрузку.