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

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

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

@font-face {
  font-family: 'PF Din CompPro'; /* имя шрифта для CSS правил */
  src: local("PF Din CompPro"), /* проверяем наличие шрифта в ОС пользователя */
       url('fonts/pfdintextcomppro-medium-webfont.ttf'); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

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

Здесь ‘PF Din CompPro’ — название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-medium-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-medium-webfont.eot');
src: url('fonts/pfdintextcomppro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/pfdintextcomppro-medium-webfont.woff') format('woff'),
url('fonts/pfdintextcomppro-medium-webfont.ttf') format('truetype'),
url('fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium') format('svg');
font-weight: normal;
font-style: normal;
}

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

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

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

Для установки  Google Webfonts :

В Google есть отличные бесплатные шрифты для оформления сайта и любого проекта. Чтобы воспользоваться ими на своем сайте достаточно перейти в библиотеку, выбрать понравившиеся и кликнуть на кнопку под шрифтом.

Внизу этой страницы есть область встроенного кода. Этот код нужно скопировать и добавить в используемую вами тему в файл header.php сразу после открытия тега <head> ну а дальше по примеру:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}