Подключаем шрифты правильно

Часто встречаю неправильное подключение шрифтов, а на исправление иногда уходит много времени, покажу как я подключаю нестандартные шрифты

Часто встречаю неправильное подключение шрифтов, а на исправление иногда уходит много времени, покажу как я подключаю нестандартные шрифты.

Для начала необходимо сконвертировать файл шрифта во все необходимые форматы. Это можно сделать с помощью www.fontsquirrel.com Файл настроек для кириллицы generator_config.txt

Далее загружаем полученный файлы на хостинг и подключаем:

@font-face{
 font-family: 'roboto';
  src: url('./fonts/roboto/roboto-regular/roboto-regular-webfont.eot');
  src: url('./fonts/roboto/roboto-regular/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
	   url('./fonts/roboto/roboto-regular/roboto-regular-webfont.ttf')  format('truetype'),
	   url('./fonts/roboto/roboto-regular/roboto-regular-webfont.woff') format('woff'),
	   url('./fonts/roboto/roboto-regular/roboto-regular-webfont.svg#svgFontName') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}
@font-face{
 font-family: 'roboto';
  src: url('./fonts/roboto/roboto-bold/roboto-bold-webfont.eot');
  src: url('./fonts/roboto/roboto-bold/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
	   url('./fonts/roboto/roboto-bold/roboto-bold-webfont.ttf')  format('truetype'),
	   url('./fonts/roboto/roboto-bold/roboto-bold-webfont.woff') format('woff'),
	   url('./fonts/roboto/roboto-bold/roboto-bold-webfont.svg#svgFontName') format('svg');
 font-weight: bold;
 font-style: normal;
 font-display: swap;
}
@font-face{
 font-family: 'roboto';
  src: url('./fonts/roboto/roboto-italic/roboto-italic-webfont.eot');
  src: url('./fonts/roboto/roboto-italic/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
	   url('./fonts/roboto/roboto-italic/roboto-italic-webfont.ttf')  format('truetype'),
	   url('./fonts/roboto/roboto-italic/roboto-italic-webfont.woff') format('woff'),
	   url('./fonts/roboto/roboto-italic/roboto-italic-webfont.svg#svgFontName') format('svg');
 font-weight: normal;
 font-style: italic;
 font-display: swap;
}

Обратите внимание, что font-family всегда одинаковый, а вот font-weight и font-style зависят от параметров подключаемого шрифта

После подключения данный шрифт можно использовать в стилях

h1 {
	font-family: 'roboto', sans-serif;
	font-weight: bold;
}
p, i {
	font-family: 'roboto', sans-serif;
}

У вас должна быть лицензия/право на использование коммерческого шрифта на своем сайте. Если такой нет, выбирайте из "свободных", например на fonts.google.com

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.