До того, как гугл фонтс набрал популярность, именно этот сервис был любимым инструментом фронтенд-разработчиков, внедрявших нестандартные гарнитуры.
Примечание. Слово «гарнитура» я употребляю здесь в классическом типографском смысле, как «начертание шрифта». Никакого отношение к мобильному микрофону с наушниками оно в этой статье не имеет.
Переходим на сайт и видим кучу интересных и полезных вещей.
Во-первых, хорошую коллекцию наиболее популярных шрифтов со свободной лицензией.
Во-вторых, инструмент для поиска шрифтов по их начертанию – достаточно загрузить картинку с исходным изображением.
В-третьих, встроенный генератор, позволяющий подготовить необходимые ресурсы для внедрения в свой проект.
Процесс работы с 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 отказывается работать с вашим шрифтом, читайте здесь.