Предварительная загрузка шрифтов

[Metotron0]

извлёк для себя важный урок. Он заключается в том, что никогда не стоит ничего предполагать.
Странный урок. Если не делать предположений, то с чего начинать проектирование? Нужно же от чего-то изначально отталкиваться.

[Metotron0]

Сломал цитирование. С телефона это не было видно. Со второй строки — мои слова

[Dolios]

С телефона вторая строка начинается словами "заключается в том..." :)

[CoolCmd]

да почти любой. сейчас такой фетиш — если на сайте нету загружаемых шрифтов, то сайт говно.

[frkbvfnjh]

Сейчас все, что без фетиша — говно…

[den_stranger]

Есть кроссбраузерное решение — перевести шрифт в base64 и грузить в font-face:
@font-face {
font-family: "font-name";
src: url(data:application/x-font-woff;charset=utf-8;base64,PASTE-BASE64-HERE);
}


[maksim_bezgodov]

А именно, мне показалось, что это выглядит как двойная загрузка шрифта

Сайт web.dev говорит:

Some types of resources, such as fonts, are loaded in anonymous mode. For those you must set the crossorigin attribute with preload

Caution: Fonts preloaded without the crossorigin attribute will be fetched twice!

Для шрифтов всегда добавляйте атрибуты: as="", type="", crossorigin, чтобы указать браузеру какой тип будет загружен, чтобы предотвратить лишние запросы. crossorigin необходим для того, чтобы не загружать шрифт дважды (при предзагрузке и потом, например, в стилях)

Например, так:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>