Как установить шрифт на сайт?

Часто предоставляют дизайн в фигме и в psd, без предоставления самих шрифтов. А дизайнеры очень любят использовать нестандартные шрифты, но это итак понятно, они чаще симпатичнее стандартных. Давай по порядку, со шрифтами разные случае могут быть, поехали…

1. Нужно поискать шрифт у гугла

Заходим на сайт https://fonts.google.com/ и вбиваем в поиск название шрифта. Если шрифт нашелся, отлично, для многих множества заказов достаточно подключить такой шрифт. Например Montserrat, выбираем жирность нужных шрифтов и получаем примерно такой код для html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Вставляем его на страницу до закрывающего тега head и далее подключаем в стилях

font-family: 'Montserrat', sans-serif;

Это было слишком просто…

2. Если шрифта нет у гугла?

Вбиваем в поисковике например такой запрос скачать шрифт Roadradio, находим и скачиваем шрифт, но обязательно выясни, поддерживает ли шрифт кириллицу или нет.
Шрифт скачается в следующих форматах eot, ttf, otf, woff, woff2, Если так, то супер, теперь заливаем шрифты в папку fonts/Название_шрифта и прописываем в CSS пути к шрифтам

@font-face {
  font-family: 'Roadradio Bold';
  src: url('fonts/Roadradio/roadradio_bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Roadradio/roadradio_bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Roadradio/roadradio_bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Roadradio/roadradio_bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Roadradio/roadradio_bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Roadradio/roadradio_bold.otf') format('opentype');
    }

И для отдельных элементов или к body подключаем все тем же способом

font-family: 'Roadradio Bold', sans-serif;

Зачем столько файлов для шрифта??? Чтобы адаптировать шрифт для разных браузеров. Если установить какой-нибудь 1 формат, то многие браузеры просто не увидят этот шрифт и будут показывать страницу с установленным по умолчанию, шрифтом. Да, это лишь 1 минус в том что браузеров много. Приходится писать код так, чтобы угодить всем браузерам.

Это было чуть сложнее, потому что нужно больше манипуляций…

3. Если нет всех этих форматов файлов в скаченном архиве шрифта?

Да и такое часто бывает к сожалению, но и тут можно исправить ситуацию. Раз уж нужны эти форматы, значит нужно сделать! Логично неправда ли? Тогда заходим например на сайт https://cloudconvert.com/. Здесь можно сконвертировать шрифт в нужные форматы. Допустим мы нашли шрифт только ttf формате. Выбираем
TTF to OTF, скачиваем… потом,
TTF to WOFF, TTF to WOFF2, TTF to EOT

Вот теперь есть все нужные форматы шрифтов, заливаем в папку со шрифтом и подключаем все это дело так, как писал в предыдущем пункте.