Экономим время на подключении шрифтов в проект
Всем привет!
Сегодняшний пост о спонтанно появившемся сайте со шрифтами.
Все началось после того, как мне в очередной раз пришел макет с нестандартным шрифтом. Причем, я понял, что этот шрифт уже подключался мною ранее в других проектах. Опять пришлось лезть искать его по папкам. А поскольку я ярый оптимизатор своего рабочего процесса, меня это в который раз серьезно озаботило. Почему бы все шрифты не сложить в одном месте и по необходимости вставлять в проект? — подумалось мне, и тут же решил воплотить задуманное.
Буквально за 3 часа были собраны все свои шрифты, разложены по папкам, настроены пути и написан сниппет для редактора. Уже после первых тестов стало понятно, насколько это упрощает процесс и экономит время. Любой шрифт можно подключить буквально в пару кликов.
После двух дней легкой эйфории решил попробовать перенести это в онлайн, и упростить жизнь уже своим друзьям-коллегам. Дальше были все те же действия: сортировка-пути-набивание импортов. Но тут уже надо было думать, как отдавать ссылки на импорты файлов, ведь не все пользуются тем же редактором, что и я. Значит надо делать какой-то интерфейс, в котором и выводить нужные линки. По мере создания интерфейса приходили новые идеи по реализации и оптимизации. Что получилось в итоге, можно посмотреть здесь.
Сейчас на сайте 19 шрифтов в сорока восьми начертаниях, которые в те же пару кликов можно подключить себе в проект.
Как все работает
Технология работы предельно проста: используется обычный
@import
Теперь о плюшках
Для импортов я написал пару сниппетов: нативный для Sublime Text 2 и ненативный для NotePad++. Здесь я не буду рассказывать как ими пользоваться, но на сайте довольно подробно все расписано. Даже с одним скриншотом. Кроме того, я подготовил исходник для любого, кто захочет написать сниппет для своего редактора.
Очень рекомендую пользоваться сниппетами. Это быстро и удобно.
Заметки
Firefox и Opera не захотели импортировать шрифты. Точнее не работало подключение файла, если он находился на другом домене. Вопрос решился перегоном файла шрифта в base64. При этом архив для скачивания шрифта содержит обычный .ttf-файл. Что вам использовать в конечном варианте — выбирайте сами.
Мое повествование подошло к концу и остались только вопросы к вам.
- Насколько это может быть полезно\интересно вам и продолжать ли наращивать кол-во шрифтов в онлайне?
- Делать сайт самостоятельным сервисом и переводить на собственный домен?
- Как с вероятностью в 101% узнавать о платности\бесплатности шрифта, не прибегая к разборке его на составляющие или связи с автором?
Еще отдельное спасибо моим друзьям, и по совместительству нашим коллегам, которые организовали мне первую обратную связь. После их отзывов сайт преобразился. А местами значительно.
За «дизайн» прошу сильно помидорами не закидывать, т.к. я всего лишь верстальщик и делал все по наитию.
Обязательная ссылка на сайт в футере поста.
p.s. Пост почти полностью был написан в тени кустов сирени, на лавочке Первомайского сквера города Новосибирска. Здесь здорово :)
Спасибо за внимание.
upd Коллеги, я просматриваю все ваши комментарии. Вносить какие-то правки моментально не получится. А заниматься глобальным исправлением недочетов начну, когда будет более менее четкая картина какой интерес представляет этот сайт, ибо в холостую тратить время не хочется, прошу понять.
Спасибо за ваши отзывы.
upd от 28.08.2012
Сайт переехал жить на свой собственный домен и доступен по ссылке WebFont.ru. Все новые шрифты будут появляться теперь там, а прежняя версия скоро начнет редиректить на новый адрес. Всем, кто подключил шрифты напрямую, советую сменить импорты, но шрифты еще некоторое время останутся доступны.