12 июля 2012 в 06:46

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

image

Всем привет!

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


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

Буквально за 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. Все новые шрифты будут появляться теперь там, а прежняя версия скоро начнет редиректить на новый адрес. Всем, кто подключил шрифты напрямую, советую сменить импорты, но шрифты еще некоторое время останутся доступны.
@Softlink
карма
76,0
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (34)

  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Да, я естественно знаю про гуглошрифты. Но ведь они не позволяют выбрать нужный прямо из редактора. И у них ведь несколько иная задача. Они предназначены для подключения в проект на длительное пользование, я же пока такой цели не ставил.
      Про нагрузку тоже думал, и для начала надо посмотреть, будет ли кто-то вообще пользоваться сайтом или все останется на уровне персональной оптимизации рабочего процесса.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Спасибо, буду иметь ввиду.
    • 0
      у сервиса от гугла есть существенный минус — он дает скачивать шрифт только в формате ttf, а здесь же все форматы
      • 0
        Строго говоря, Google Web Fonts не имеет такой цели — предлагать шрифты для скачивания. Вместо того он предлагает подключать CSS-код, лежащий на сайте у Google, который генерируется динамически и оттого в зависимости от браузера содержит гиперссылку на нужный формат: WOFF, или TTF, или EOT, или SVG.
        • 0
          Я это прекрасно понимаю, но предпочитаю держать файлы шрифтов у себя на сервере, а потому, их приходится конвертировать в нужные форматы. Здесь же мы получаем все готовое — бери и пользуйся.
          • 0
            А я наоборот сейчас храню всё у Гугла: и шрифты, и jQuery.
            • 0
              С гуглошрифтами согласен, а вот jQuery подключаю с яндекса
    • 0
      Кстати…
      Недавно переводил сайт (там используется PT Sans) с локальных шрифтов на google/webfonts.
      В целом всё работает нормально, но есть один раздражающий момент: все грифы несколько опущены относительно строки. В результате надписи на кнопках/плашках/итд выглядят немного «провисшими».
      У того же шрифта, вручную сконвертированного при помощи Font Squirrel, такого недостатка нет.
      Может кто-то сталкивался, как поправить?
      • 0
        *глифы
      • 0
        Подавляющее большинство шрифтов сконвертировано на fontsquirell.com
  • +4
    У гугла есть существенный плюс — CDN и кеш.
    • 0
      Но тем не менее. Пару раз в год «а что это у нас сайт не отображается» видим :(
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Неплохо бы сразу на главной отображать начертания шрифтов (хотя бы Normal). Потому что тыкать по каждому, чтобы выбрать нужный, не очень удобно. Особенно когда их количество перевалит за 2 десятка.
    • 0
      С интерфейсом надо будет еще поработать — это верно. Предложенный вами вариант тоже не решит проблему, т.к. появится большой список из демо примеров.
  • 0
    а что с поддержкой в IE?
    • 0
      Пичалька, видимо все шрифты конвертированы в кривых конвертерах, кои плохо поддерживают кириллицу при конвертировании для ие младше 9.
      Автору сайта — проверьте и сконвертируйте шрифты чтобы нормально отображались и в ие 7-8 (кстати верстка сайта тож едет в данных браузерах, а их пока рановато списывать)
      • 0
        *Упустил ваше замечание про уплывающую верстку в разных браузерах.
        Да, она действительно работает корректно только в последних и предпоследних версиях. По-моему, логично думать, что разработчики(тем более верстальщики), не работают в FF 2.0 или IE 7.
    • 0
      Для кроссдоменности в ИЕ надо также как и с ФФ и Оперой перекодировать в base64. Я про это знаю и обязательно займусь.
  • 0
    font.alpatriott.ru/osans/ скачать шрифт не работает. Хромиум, Windows.
  • 0
    Отличный сервис, спасибо за пост! Добавил в закладки
  • +1
    Те же Futura или Myriad Pro — платные, соответственно, использование их без лицнзирования запрещено. Проверить просто — загуглить, а лучше сразу на myfonts.com смотреть. Бесплатных шрифтов крайне мало и обычно их знаешь в лицо :)
    • +2
      Вобщем-то, навскидку, у вас из бесплатных только Cuprum, PT Sans и Open Sans. :)
      • 0
        Хорошо, решим что делать. А вот этот сайт www.dafont.com/ никак не котируется? Если смотреть на нем, ту получается бесплатных шифтов несколько больше.
        • 0
          требовать ссылку в этом случае как-то… неправильно)
        • 0
          Кириллических шрифтов там крайне мало, к тому же, можно отбросить шрифты с надписью «Free for personal usage»
        • +2
          Оставлю пару ссылок на сайты с бесплатными кириллическими шрифтами.
          free.type.org.ua
          Тут в комментах собирают шрифты.
          4thfebruary
          • 0
            Спасибо.
      • 0
        Несколько шрифтов прямиком отсюда jovanny.ru/free-fonts.html, кстати, mithgol доносил новости с тех полей на хабр :)
  • 0
    Rotonda не качается (
  • 0
    Лицензирование, лицензирование и еще раз лицензирование. Шрифт — это не просто файлик. Это очень много работы часто нескольких людей. Поверьте, не случайно на Google Web Fonts не так много шрифтов.
    • 0
      В целом вполне достаточно. Я бы хотел там видеть еще серию от Windows 8, но доброй воли MS видимо пока нет, а так количество и качество вполне устраивает.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.