Как подключить нестандартный шрифт к сайту с помощью @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” и вы получите нужный архив со всеми форматами своего шрифта.

Из архива скачайте все форматы ваших шрифтов, по идее это 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, а так же отметьте нужные для вас языки и форматы.

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

Небольшой апдейт 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;
}