Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило @font-face, есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант — подключение уникальных шрифтов с помощью @font-face.

Самый простой способ подключить шрифт — прописать в таблице стилей:

@font-face {
  font-family: 'PF Din CompPro';
  src: url('fonts/pfdintextcomppro-webfont.ttf');
}
 
body{
  font-family: "PF Din CompPro", sans-serif;
}

Здесь 'PF Din CompPro' — название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-webfont.ttf — это путь к вашему шрифту, который лежит в папке fonts, важно, чтобы в названии файла шрифтов не было пробелов, лучше замените их на тире.

Это самый простой способ, но вот только работает он не во всех браузерах, и это большая проблема.

Каждый браузер поддерживает свои форматы шрифтов:

  • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts for Internet Explorer 4+
  • WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG fonts for iPad and iPhone

Поэтому вам придется из одного своего шрифта в формате .ttf сделать еще несколько таких же шрифтов только в другом формате. Здесь поможет генератор шрифтов на сайте fontsquirrel.com. На этой странице загрузите свой шрифт, выберите настройки Optimal, отметьте чекбокс с подтверждением о легальности загружаемого шрифта (некоторые шрифты стоят очень много денег и у вас должно быть разрешение на их использование), затем нажмите кнопку «Download Your kit» и вы получите нужный архив со всеми форматами своего шрифта.

font-face-generator

Из архива скачайте все форматы ваших шрифтов, по идее это 4 файла с расширениями .eot, .svg, .ttf и .woff, эти файлы скопируйте в папку fonts на своем сайте, так же в архиве будет лежать файл stylesheet.css — в нем уже будут прописаны все правила для подключения шрифтов, можете смело скопировать их в свою таблицу стилей, только не забудьте указать свои пути к файлам шрифтов, например, к папке fonts. Пример того, что получилось на одном из моих сайтов:

@font-face {
    font-family: 'PF Din CompPro';
    src: url('fonts/pfdintextcomppro-webfont.eot');
    src: url('fonts/pfdintextcomppro-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdintextcomppro-webfont.woff') format('woff'),
         url('fonts/pfdintextcomppro-webfont.ttf') format('truetype'),
         url('fonts/pfdintextcomppro-webfont.svg#pf_din_text_comp_pro') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: "PF Din CompPro", sans-serif;
}

С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.

Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки «Expert«. Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.

Пример того, что получилось у меня вот:

font-face

Небольшой апдейт 04.02.2021.

На данный момент достаточно подключать .ttf или .woff (woff2) шрифты, но .ttf весит много, поэтому лучше .woff (woff2), которые сжаты и оптимизированы для WEB. Так же не забывайте для гугла добавлять font-display: swap.

@font-face {
  font-family: 'PF Din CompPro';
  src: url('fonts/pfdintextcomppro-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
body{
  font-family: 'PF Din CompPro', sans-serif;
}
Как увеличить скорость загрузки страниц на сайте

На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…

Выпадающий блок при наведении на родительский элемент

Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

Перевод кириллицы в UTF-8

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

4 комментария

Спасибо!
Статья очень помогла, особенно в части настроек генерирования шрифта с поддержкой кириллицы.

Статью создавал как шпаргалку для себя. Приятно, что кому-то еще она пригодилась.)

Спасибо чел очень помог, я бы сам не смог бы найти норм англ сайты где преобразуются сразу все шрифты в нужные мне. Обычно я никогда не пишу, но реально помог. Поэтому покликаю несколько реклам на твоем сайте)))

Спасибо)))
Успехов!

Ответить