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

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

    Similar posts

    Comments 34

    • UFO just landed and posted this here
        0
        Да, я естественно знаю про гуглошрифты. Но ведь они не позволяют выбрать нужный прямо из редактора. И у них ведь несколько иная задача. Они предназначены для подключения в проект на длительное пользование, я же пока такой цели не ставил.
        Про нагрузку тоже думал, и для начала надо посмотреть, будет ли кто-то вообще пользоваться сайтом или все останется на уровне персональной оптимизации рабочего процесса.
        • UFO just landed and posted this here
            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
                Но тем не менее. Пару раз в год «а что это у нас сайт не отображается» видим :(
              • UFO just landed and posted this here
                  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 видимо пока нет, а так количество и качество вполне устраивает.

                                      Only users with full accounts can post comments. Log in, please.