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

Алексей Будагов,

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

Для начала необходимо сконвертировать файл шрифта во все необходимые форматы. Это можно сделать с помощью 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-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-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-family всегда одинаковый, а вот font-weight и font-style зависят от параметров подключаемого шрифта

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

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

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

Опубликовано 29 Марта 2017 | Обновлено 30 Марта 2017
полезное, верстка, разработчику

Возврат к списку

Комментарии