Подключаем шрифты с помощью сервиса Font Squirrel. На всякий случай squirrel –по-английски это «белочка», так что не подумайте ничего плохого. До того, как гугл фонтс набрал популярность, именно этот сайт был любимым инструментом фронтенд-разработчиков, внедрявших нестандартные гарнитуры.

Примечание. Слово «гарнитура» я употребляю здесь в классическом типографском смысле, как «начертание шрифта». Никакого отношение к мобильному микрофону с наушниками оно в этой статье не имеет.

Переходим на сайт и видим кучу интересных и полезных вещей.

фото 1

Во-первых, хорошую коллекцию наиболее популярных шрифтов со свободной лицензией.

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

В третьих, встроенный генератор, позволяющий подготовить необходимые ресурсы для внедрения в свой проект.

Процесс работы с Font Squirrel

Шаг 1. Поиск и скачивание нужных шрифтов

Вбиваем в окошко название, жмём «Enter» и скачиваем то, что нашлось.

фото 2

Не факт, что всё пройдёт легко и быстро. На сайте удалось скачать Source Sans Pro и Open Sans. Два остальных шрифта Gotham и Gotham Light пришлось искать на сторонних ресурсах. В кириллическом начертании они нашлись на хорошем сайте Рixelgene.

фото 3

Здесь, как видим, очень неплохо показано начертание шрифта, его описание и даже указана похожая гарнитура. Кстати, для поклонников решений от «Корпорации добра» — на Google Fonts этих двух шрифтов тоже не было.

Скачанные архивы открываем и переходим к следующему шагу.

Шаг 2. Генерация ресурсов

Рассмотрим процесс на примере Source Sans Pro, остальные подключаются аналогично. Итак, в разархивированной папке мы видим вот что.

фото 4

Отсюда нам нужны только 4 файла. («It» в конце файла означает «Italic» или курсив, в нашем проекте не используется):

  • SourceSansPro-Regular.otf
  • SourceSansPro-Light.otf
  • SourceSansPro-Semibold.otf
  • SourceSansPro-Bold.otf

Переходим на сайт в раздел «Generator».

фото 5

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

 Сайт работает реально медленно, поэтому запасаемся чаем, терпением, не пытаемся ничего перезагружать и мирно дожидаемся результата. Файлы загружаем один за другим, а не все кучкой, чтобы не подвесить сервис.

По завершению процесса должно быть примерно вот это:

фото 6

Теперь нужно правильно расставить настройки.

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

фото 7

Нажимаем кнопку с языковыми настройками (по умолчанию скрыты). Указываем нужные нам алфавиты – кириллица и английский, отмечаем все дополнительные начертания. Могут пригодиться.

фото 8

Внизу будет таблица символов, в которой можно посмотреть что и в каком виде будет отображаться. Движемся дальше.

фото 12

Оставляем имя css-файла по умолчанию stylesheet.css – потом, если понадобится, заменим на то, что нам нужно. И запоминаем настройки. Сервис хранит их в куках браузера, так что при следующих сеансах таблица заполнится сама. Иногда рекомендуют включать функцию встроенного CSS с помощью Base64 Encode, однако, на практике она работает очень нестабильно.

Всё готово, жмём кнопку, наливаем вторую чашку чая, терпеливо допиваем и скачиваем результат в zip-архиве.

Шаг 3. Проверка результата

В итоговом архиве мы видим, во-первых, все заказанные шрифты, во-вторых, запрошенный файл stylesheet.css, в третьих конфигурационные файлы, в четвёртых демонстрационные html-файлы.

фото 10

Открываем один из последних, идём в раздел «Glyphs & languages» и проматываем вниз, чтобы посмотреть, как отображается кириллица.

фото 11

Если всё нормально, результат можно использовать в проекте. Кстати, в этих же файлах можно посмотреть и подробную шпаргалку по подключению.

Шаг 4. Подключение шрифтов

В папке «Fonts» создаём отдельную папку для этого шрифта «source-sans-pro» и кидаем туда файл stylesheet.css, кидаем туда же и все файлы с расширениями eot, ttf, woff и woff2 – это и есть ресурсы для наших шрифтов.

Далее мы просто подключаем файл в шапке index.html.

<link rel="stylesheet" href="fonts/source-sans-pro/stylesheet.css">

Чтобы использовать шрифт, в css для нужного блока просто нужно будет добавить:

font-family: 'source_sans_prolight', sans-serif;

Конкретный тип шрифта, который нам понадобится, подсматриваем в файле stylesheet.css. Для жирного – source_sans_probold, для полужирного – source_sans_prosemibold, в общем, логика понятна.

Заключение

Эту несложную, но довольно нудную процедуру придётся повторить три раза. (Gotham и Gotham Light входят в одну коллекцию). В итоге мы заполучили все нужные шрифты к себе на сервер и можем спокойно с ними работать.

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

А мы, решив непростой вопрос по со шрифтами, переходим, наконец, уже к практическому обзору макета.