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

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

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

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

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

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

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

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

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

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

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

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

Итак, в разархивированной папке мы видим вот что.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 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, в общем, логика понятна.

Заключение

Этот путь достаточно сложен, однако, позволяет вам обойтись без Гугл Фонтс. Плюсы – все необходимые ресурсы для работы сайта есть у вас на сервере. Минусы – достаточно трудоёмкий процесс установки и подключения.

Что делает, если Font Squirrel отказывается работать с вашим шрифтом, читайте здесь.