Подключение шрифтов

[pacahon]

Изучить способы подключения веб-шрифтов, выбрать один из способов для нового шаблона.

TODO: подумать над своим хостом шрифтов, думаю woff и woff2 за глаза всем хватит
ещё умных ссылок:
https://amio.github.io/embedded-google-fonts/
https://webformyself.com/google-fonts-uskorit-vremya-zagruzki/
https://google-webfonts-helper.herokuapp.com/fonts

[mikhailovSvyat]

Насколько я понимаю, в нашем случае выбор стоит между использованием ссылки с google fonts и самостоятельном размещении шрифтов на своем сервере. Т.е. выбор между link и @font-face

Какие есть различия:

1. Файл из link загрузится раньше чем сам css
2. У google fonts мощный CDN значит не будет проблем с отображением шрифта в разных браузерах
3. Размещать файл на своих серверах безопасней
4. Больше контроля при самостоятельном создании таблиц стилей для шрифта… Возможность указать поведение при подгрузке шрифта с помощью font-display

Статьи по теме: раз, два

Как-то так, думаю нам google fonts подходит

[pacahon]

По идее для себя создавал эту тему %)

Предполагалось, что разберусь вот в этой статье https://www.zachleat.com/web/comprehensive-webfonts/ и выберу подходящий вариант.

Мне тогда показался самым лучшим способом подгрузки шрифта - base64 encoding, но когда спросил у Кать, то оказалось, что им пофиг как он подгружается, поэтому забил и продолжил использовать google fonts. Особенность GF в том, что они в зависимости от браузера может подгружать наиболее релевантный шрифт, но это не GDPR-compliant

[mikhailovSvyat]

Ну в любом случае мне было полезно в этом покопаться)

[pacahon]

Думаешь я просто так прокомментировал, ещё и ссылку подкинул? Читай давай :)

[mikhailovSvyat]

Пишу чтобы самому не забыть. На https://www.smashingmagazine.com Отступы в тексте зависят от ширины вьюпорта. Например (line-height: calc(1.5em + .2vw);)