Экономим время на подключении шрифтов в проект

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