Рассмотрим ситуация на практическом примере из моей практики. Камнем преткновения стал шрифт 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;}
В итоге увидим, например, такую строку:
Заключение
Итак, как вы видите, даже при саботаже со стороны базовых сервисов, проблема нестандартных шрифтов легко решается. Для этого нужно:
- Найти нужный шрифт в одном из форматов.
- Скомпилировать оставшиеся форматы.
- Поместить исходные файлы в общую папку.
- Написать конфигурационный файл с добавлением шрифтов.
- Подключить стили и пользоваться.
Вместе с тем, отмечу, что серьёзные сервисы не просто так избегают связываться с такого рода шрифтами.
Юристы компаний-правообладателей ведут активную работу, разыскивая сайты с нелицензионными ресурсами, шантажируя владельцев и запугивая судебными исками. Для небольшого блога или интернет-магазина по продаже часов это вряд ли станет проблемой, а вот при работе с крупным заказчиком на правовые аспекты стоит обратить внимание.
Поэтому требуйте у дизайнера шрифты со свободной лицензией, которые есть в Гугл Фонтс, а если это невозможно – ищите аналогичную бесплатную версию. Которых сотни.