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

Всем привет!

Сегодняшний пост о спонтанно появившемся сайте со шрифтами.


Все началось после того, как мне в очередной раз пришел макет с нестандартным шрифтом. Причем, я понял, что этот шрифт уже подключался мною ранее в других проектах. Опять пришлось лезть искать его по папкам. А поскольку я ярый оптимизатор своего рабочего процесса, меня это в который раз серьезно озаботило. Почему бы все шрифты не сложить в одном месте и по необходимости вставлять в проект? — подумалось мне, и тут же решил воплотить задуманное.

Буквально за 3 часа были собраны все свои шрифты, разложены по папкам, настроены пути и написан сниппет для редактора. Уже после первых тестов стало понятно, насколько это упрощает процесс и экономит время. Любой шрифт можно подключить буквально в пару кликов.

После двух дней легкой эйфории решил попробовать перенести это в онлайн, и упростить жизнь уже своим друзьям-коллегам. Дальше были все те же действия: сортировка-пути-набивание импортов. Но тут уже надо было думать, как отдавать ссылки на импорты файлов, ведь не все пользуются тем же редактором, что и я. Значит надо делать какой-то интерфейс, в котором и выводить нужные линки. По мере создания интерфейса приходили новые идеи по реализации и оптимизации. Что получилось в итоге, можно посмотреть здесь.

Сейчас на сайте 19 шрифтов в сорока восьми начертаниях, которые в те же пару кликов можно подключить себе в проект.

Как все работает

Технология работы предельно проста: используется обычный

@import

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

Теперь о плюшках

Для импортов я написал пару сниппетов: нативный для Sublime Text 2 и ненативный для NotePad++. Здесь я не буду рассказывать как ими пользоваться, но на сайте довольно подробно все расписано. Даже с одним скриншотом. Кроме того, я подготовил исходник для любого, кто захочет написать сниппет для своего редактора.
Очень рекомендую пользоваться сниппетами. Это быстро и удобно.

Заметки

Firefox и Opera не захотели импортировать шрифты. Точнее не работало подключение файла, если он находился на другом домене. Вопрос решился перегоном файла шрифта в base64. При этом архив для скачивания шрифта содержит обычный .ttf-файл. Что вам использовать в конечном варианте — выбирайте сами.

Мое повествование подошло к концу и остались только вопросы к вам.

1. Насколько это может быть полезно\интересно вам и продолжать ли наращивать кол-во шрифтов в онлайне?
2. Делать сайт самостоятельным сервисом и переводить на собственный домен?
3. Как с вероятностью в 101% узнавать о платности\бесплатности шрифта, не прибегая к разборке его на составляющие или связи с автором?

Еще отдельное спасибо моим друзьям, и по совместительству нашим коллегам, которые организовали мне первую обратную связь. После их отзывов сайт преобразился. А местами значительно.

За «дизайн» прошу сильно помидорами не закидывать, т.к. я всего лишь верстальщик и делал все по наитию.

Обязательная ссылка на сайт в футере поста.

p.s. Пост почти полностью был написан в тени кустов сирени, на лавочке Первомайского сквера города Новосибирска. Здесь здорово :)

Спасибо за внимание.

upd Коллеги, я просматриваю все ваши комментарии. Вносить какие-то правки моментально не получится. А заниматься глобальным исправлением недочетов начну, когда будет более менее четкая картина какой интерес представляет этот сайт, ибо в холостую тратить время не хочется, прошу понять.
Спасибо за ваши отзывы.

upd от 28.08.2012
Сайт переехал жить на свой собственный домен и доступен по ссылке WebFont.ru. Все новые шрифты будут появляться теперь там, а прежняя версия скоро начнет редиректить на новый адрес. Всем, кто подключил шрифты напрямую, советую сменить импорты, но шрифты еще некоторое время останутся доступны.