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

    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. Все новые шрифты будут появляться теперь там, а прежняя версия скоро начнет редиректить на новый адрес. Всем, кто подключил шрифты напрямую, советую сменить импорты, но шрифты еще некоторое время останутся доступны.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                                    Несколько шрифтов прямиком отсюда jovanny.ru/free-fonts.html, кстати, mithgol доносил новости с тех полей на хабр :)
                                • 0
                                  Rotonda не качается (
                                  • 0
                                    Лицензирование, лицензирование и еще раз лицензирование. Шрифт — это не просто файлик. Это очень много работы часто нескольких людей. Поверьте, не случайно на Google Web Fonts не так много шрифтов.
                                    • 0
                                      В целом вполне достаточно. Я бы хотел там видеть еще серию от Windows 8, но доброй воли MS видимо пока нет, а так количество и качество вполне устраивает.

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