Всем привет.
Это будет пятничный небольшой пост о том, как у нас работает внутренняя кухня, да и просто чтобы все понимали, что мы делаем.
Вступление
Наш проект появился чуть более года назад с того, что надо было как-то упростить получение шрифтов разработчиками. Тогда был написан первый сниппет, собрано около двух десятков шрифтов и запуск. Сейчас у нас 266 шрифтов, сайт оброс функционалом, вместо сниппета появились плагины для редакторов, и даже расширение для браузеров есть.
В первой вводной статье мы опишем все этапы, через которые проходит любой шрифт, перед тем как попасть на ваши сайты. А в последующих статьях будем расписывать самые интересные моменты из этих этапов с точки зрения разработки и практического применения.
Отбор шрифтов
Ни для кого не секрет, что бесплатных шрифтов, поддерживающих кириллицу, очень мало, но нам все же удалось собрать около двухсот таковых, а совсем недавно мы начали публиковать шрифты, содержащие только латиницу.
Сам поиск и отбор начинается с отслеживания самых популярных сайтов и блогов, которые освещают дизайн. Например: smashingmagazine.com, behance.net, creativebloq.com и т.д. Что-то толковое можно найти в социальных сетях, в которых помогают хештеги.
После того, как найден шрифт, он проходит проверку на бесплатность. Если к нему не приложена лицензия, то мы проверяем его наличие в платных каталогах или ищем сайт автора, на котором наверняка можно убедиться в этом. Подавляющее большинство шрифтов, размещаемых у нас, распространяются по лицензиям OFL и Creative Commons. Однако некоторые авторы не считают нужным следовать общепринятым лицензиям и просто пишут свои условия, которым мы тоже следуем. Например, мы не публикуем шрифты, где автор указывает «free for personal use» или явно запрещает их распространение на других ресурсах. Но вчера у нас был первый случай, когда мы связались с автором шрифта и получили согласие на публикацию его работы у нас. Такой себе эксклюзив получился. Еще есть шрифты, так называемые freeware – у которых не удалось установить ни автора, ни бесплатности. Мы их публикуем тоже, но в любой момент можем убрать по первой просьбе правообладателя.
Что касается качественного отбора, то тут все просто. Кириллицу, ввиду ее ограниченного количества, мы публикуем всю, латиницу же отбираем тщательней. Например, смотрим на полноту начертаний в семействе, отображение шрифта в браузерах и делаем оглядку на востребованность и современные тенденции.
Конвертирование
Пока мы пользуемся самым известным конвертером – fontsquirrel. Из всех существующих конвертеров лучше всего себя показал именно он. Да, и «белка» тоже не идеальна, но в текущих условиях никто из нас не имеет лучших альтернатив. Вообще, все подобные сервисы изрядно портят исходные файлы шрифтов. Но о тестировании конвертеров и сопутствующих проблемах у нас будет отдельная статья.
Добавление шрифта и устройство системы
В мае этого года мы закончили писать свой движок. Платформой у нас служит django, а шаблонизация работает чуть ли не полностью на javascript.
Процесс добавления сводится к указанию наименования шрифта(font-family), его начертаниям(font-weightfont-style), категории и добавлению автора. После этого сервер выгружает всю информацию в один js-файл, который затем парсится на клиенте. По сути, когда пользователь переключает категории, он просто отфильтровывает шрифты для отображения из этого js-файла, без дополнительных запросов к серверу. Благодаря этому переключения становятся невероятно быстрыми. Поиск шрифтов завязан на этом же самом js-файле.
Для плагинов, ввиду их специфики и в целях унификации, мы используем json-файл, который генерируется сервером и разбирается по полочкам уже в плагинах.
Более подробно об устройстве и как это работает мы планируем рассказать в следующих наших статьях.
Хранение и раздача шрифтов
Все шрифты хранятся в двух видах(архивы/файлы) и в трех местах.
Для скачивания мы вынесли архивы на отдельный домен, сделав работоспособность плагинов и сайта независимыми друг от друга.
Для демонстрации шрифтов на сайте мы их складываем «рядом» с самим сайтом, а храним и кэшируем с помощью nginx.
Для внешнего подключения мы используем облачное хранилище. Потому что не хотим напрягать наш сервер восемью миллионами запросов в месяц. Кроме того, пока это нам обходится не очень дорого, а само облако так же дает возможность кэшировать файлы шрифтов и собирать статистику. Сразу же обращаем внимание на то, что мы не Google Fonts и не рекомендуем подключать шрифты напрямую от нас на длительное пользование. Импорты служат скорее для тестирования и проверки того, как шрифт смотрится на сайте. К тому же скачивание шрифта мы сделали не менее удобным и быстрым, чем его подключение.
доступно в 720p
С помощью всех этих манипуляций мы решили проблему с распределением нагрузки и снизили свои издержки.
В общих чертах это, пожалуй, все о том, что связано c подбором, публикацией и раздачей шрифтов у нас. Следующие статьи будут уже технического и практического толка.
Напоследок мы приготовили одно занятное открытие. Все говорят, что Google Fonts позволяет оптимизировать скорость загрузки шрифтов манипуляцией с наборами символов. Например, если подключить только латиницу, то файл шрифта будет меньше весить и загрузится быстрее. Однако ровно на латинице это и заканчивается. Если вы подключаете только кириллицу, то «бонусом» получаете и латиницу. Мы не знаем, всегда ли это было и будет ли продолжаться, но пока это факт. Проверить можно тут.
Спасибо за внимание и всем удачных выходных.
Команда WebFont.ru.
Автор: Softlink
