CSS: Подключение шрифта @font-face

Подключение шрифта может быть достигнуто с использованием правил @font-face

1. Подключение через Google Fonts

Здесь мы используем Google Fonts для загрузки шрифта в формате woff2, который поддерживается большинством браузеров. font-display: swap гарантирует, что текст будет отображаться с использованием запасного шрифта до загрузки шрифта Roboto.

Теперь вы можете использовать шрифт Roboto для текста на вашем сайте, задав его для свойства font-family.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

body {
  font-family: 'Roboto', sans-serif;
}

2. Подключение шрифта из локального файла

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

Здесь мы используем правило @font-face для определения шрифта семейства Roboto, а затем задаем различные форматы шрифтов с помощью правил src. В данном случае мы используем форматы TTF, WOFF и WOFF2, чтобы обеспечить максимальную совместимость с различными браузерами.

Далее мы применяем шрифт к элементам body, используя значение font-family. Теперь ваш сайт будет использовать шрифт Roboto, загруженный локально с вашего веб-сервера.

@font-face {
  font-family: 'Roboto';
  src: url('путь/к/шрифту/Roboto-Regular.ttf') format('truetype'),
       url('путь/к/шрифту/Roboto-Regular.woff') format('woff'),
       url('путь/к/шрифту/Roboto-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Roboto', sans-serif;
}