Как подключить на сайте нестандартный шрифт?

Рассмотрим ситуация на практическом примере из моей практики. Камнем преткновения стал шрифт Gotham. При попытке загрузить его в генератор Font Squirrel мы видим досадную надпись о том, что гарнитура внесена в чёрный список. Это означает, что правообладатели уже успели запугать и бедную белочку и, кстати говоря, богатый Гугл, у которого также не нашлось этого шрифта в коллекции.

Самым простым решением проблемы было бы найти гарнитуру с близким начертанием, благо все они похожи, как братья-близнецы, как бы господа дизайнеры не уверяли в обратном. Однако есть и более сложный путь, если вы не боитесь использовать «трофейные» ресурсы. Делается всё в два шага.

Шаг 1. Получаем нужные форматы

Итак, у нас есть файлы кириллического начертания в формате «.otf», которые мы успешно скачали с сайта Pixelgene. Из полученного списка выбираем то, что нам необходимо для работы. А именно:

• GothaProBla – чёрный;
• GothaProBol – жирный;
• GothaProLight – светлый;
• GothaProReg – обычный.

Нам нужны те же шрифты в формате «.woff» и «.ttf» для корректного отображения браузерами. Сделать это можно с помощью любого онлайн-конвертера, которых в интернете более чем достаточно. Я воспользовался вот этим. Простой интерфейс, быстрый сервер, большое количество поддерживаемых форматов, можно работать бесплатно и без регистрации. Единственный минус – в бесплатной версии за один проход можно конвертировать только два файла. Но у нас объёмы невелики.

Итак, добавляем все файлы

И выбираем тип в который будем конвертировать

Повторяем процедуру каждого файла два раза – для woff и для ttf. В итоге размещаем полученные шрифты в одну папку «gotham-cyrillic», которую помещаем в «Fonts».

Шаг 2. Подключение к css

Теперь нам нужно написать конфигурационный файл для шрифта. Давайте не будем изменять традиции и назовём его stylesheet.css. В итоге в нашей папке должно быть вот такое содержимое:

Чтобы подключить эти четыре начертания, напишем следующий код.

@font-face {
    font-family: 'gotham_bold';
    src: url('GothaProBol.eot');
    src: url('GothaProBol.woff') format('woff'),
	     url('GothaProBol.ttf') format('truetype');
	    font-weight: bold;
	    font-style: normal;	     
    }

@font-face {
    font-family: 'gotham_regular';
    src: url('GothaProReg.eot');
    src: url('GothaProReg.woff') format('woff'),
	     url('GothaProReg.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;	     
    }

@font-face {
    font-family: 'gotham_light';
    src: url('GothaProLig.eot');
    src: url('GothaProLig.woff') format('woff'),
	     url('GothaProLig.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;	     
    }

@font-face {
    font-family: 'gotham_black';
    src: url('GothaProBla.eot');
    src: url('GothaProBlat.woff') format('woff'),
	     url('GothaProBla.ttf') format('truetype');
	    font-weight: bold;
	    font-style: normal;	     
    }

Всё, шрифт можно использовать. В заголовок подключаем файл стилей.

<link rel="stylesheet" href="fonts/gotham-cyrillic/stylesheet.css">

В style.scss временно вписать стиль для абзаца, чтобы протестировать шрифт, а в индексный файл произвольный текст.

p {
	font-family: 'gotham_black', sans-senserif;
	font-size: 48px;}

В итоге увидим, например, такую строку:

Заключение

Итак, как вы видите, даже при саботаже со стороны базовых сервисов, проблема нестандартных шрифтов легко решается. Для этого нужно:

• Найти нужный шрифт в одном из форматов.
• Скомпилировать оставшиеся форматы.
• Поместить исходные файлы в общую папку.
• Написать конфигурационный файл с добавлением шрифтов.
• Подключить стили и пользоваться.

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

Юристы компаний-правообладателей ведут активную работу, разыскивая сайты с нелицензионными ресурсами, шантажируя владельцев и запугивая судебными исками. Для небольшого блога или интернет-магазина по продаже часов это вряд ли станет проблемой, а вот при работе с крупным заказчиком на правовые аспекты стоит обратить внимание.

Поэтому требуйте у дизайнера шрифты со свободной лицензией, которые есть в Гугл Фонтс, а если это невозможно – ищите аналогичную бесплатную версию. Которых сотни.