В предыдущих статьях мы подробно разобрали, как подключать нестандартные шрифты через Google Fonts и Font Squirrel. Однако проблемы могут возникнуть и с использованием этих сервисов. Чем хорошо реалити-шоу – тем что периодически возникают непредвиденные трудности, которые приходится решать по ходу действия.

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

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

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

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

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

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

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

фото 1

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

фото 2

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

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

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

фото 3

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

@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;}

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

фото 4

Заключение

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

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

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

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

Итак, статей по работе со шрифтами получилось целых четыре, зато теперь эта тема полностью закрыта. Мы подробно разобрали весь механизм поиска, подключения и использования шрифтов, а также разобрались, как обходить проблемные моменты.