Нестандартные шрифты в web, вместе с FontSquirrel

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

Бывают другие случаи, когда компания заказчик диктует использование их фирменного шрифта, который своим видом дает понять, что это именно та компания, и не какая другая. Дизайнеру в рисовании в этом плане несколько проще, он может использовать в макете любой шрифт. Но когда макет передается в руки верстальщику, тут то, как раз и возникают трудности. Как показать нужный шрифт на странице, если он не является стандартным? Тут нам на помощь приходит несколько решений: нестандартное – используем сторонние библиотеки cufon, google fonts, и другие, или стандартное – css правило @font-face. Вот о последнем подробнее пойдет речь далее.

@font-face – это такое css правило, которое позволяет подключить внешний файл шрифта к web-странице. В простейшей форме это выглядит примерно так:

// Объявляем шрифт
@font-face {
	font-family: 'Имя шрифта';
	src: url('путь/до/него');
}
// Применяем шрифт
p {
	font-family: 'Имя шрифта', Arial;
}

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

@font-face {
	font-family: 'Имя_шрифта_любое';
	src: url('Имя_файла_шрифта.eot');
	src: url('Имя_файла_шрифта.eot?#iefix') format('embedded-opentype'),
	     url('Имя_файла_шрифта.woff') format('woff'),
	     url('Имя_файла_шрифта.ttf') format('truetype'),
	     url('Имя_файла_шрифта.svg#DSNoteRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

OMG как много букв. Да уж текста много, от этого никуда не деться. Так же есть вариант подключения шрифтов в формате base64, которые будут встроены в сам css файл:

@font-face {
	font-family: 'Имя_шрифта_любое';
	src: url('Имя_файла_шрифта.eot');
}
@font-face {
	font-family: 'Имя_шрифта_любое';
	src: url(data:font/woff;charset=utf-8;base64,ДАННЫЕ) format('woff'),
	     url(data:font/truetype;charset=utf-8;base64,ДАННЫЕ) format('truetype'),
	     url('Имя_файла_шрифта.svg#Имя_файла_шрифта') format('svg');
	font-weight: normal;
	font-style: normal;
}

Второй вариант имеет место быть, но не забывайте, данные закодированные в base64 весят приблизительно на 30% больше чем исходный файл. Как видно, таким образом, мы вмонтируем целых два шрифта в css. Да для некоторых браузеров будет на один запрос меньше к серверу, но одновременно, по сути, мы загружаем один лишний шрифт. Конечно же, css файл будет закеширован, вместе с этим шрифтом, но зачем нам два шрифта в кеше? Вопрос весьма спорный, выбор за вами. О химии процесса, почему так много нужно писать и как это работает можно почитать в не плохой статье.

Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

  • Internet Explorer (все версии) — EOT;
  • Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
  • Opera (начиная с 10) — TTF/OTF;
  • Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
  • Safari (начиная с 3.2) — TTF/OTF.

Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать. "Но у меня есть шрифт, только *.ttf, что же делать?" – спросите вы меня. Вот тут я перейду к основной теме.

@font-face Generator Font Squirrel

 

Существует отличный онлайн сервис Font Squirrel, для генерации правил @font-face, и всех необходимых шрифтов, на основе стандартного *.ttf.

Сервис встречает нас не замысловатой формочкой

 

Кнопка Add Fonts позволяет, загрузить шрифт(ы) в генератор. Для примера, я использовал бесплатный шрифт DS Note.ttf скачанный отсюда.

Итак, загружаем шрифт

 

Наш шрифт появился в списке генератора.

 

Ниже мы видим три радио-бокса, "Basic", "Optimal" и "Expert…".

В режиме Basic генератор делает только конвертирование шрифта и генерацию css, никаких манипуляций со шрифтами не производится. Режим Optimal рекомендует собственные параметры оптимизации шрифта, для лучшего отображения и скорости работы. В принципе этот режим довольно достойно справляется со своей задачей в среднем, позволяя без вникания в подробности сделать кроссбраузерное подключение шрифта.

Для того чтоб запустить процесс генерации, нам нужно поставить галочку напротив надписи "Yes, the fonts I'm uploading are legally eligible for web embedding.", тем самым вы подтверждаете, что ознакомились с лицензионным соглашением по использованию шрифта. Не все шрифты дозволено использовать в web, авторское право никто не отменял! Font Squirrel не несет ответственности за использование шрифтов, нарушающее лицензионное соглашение. Для избежания неприятностей верстальщик не должен заниматься поиском нестандартного шрифта, который был использован в макете, все шрифты должны быть предоставлены дизайнером. Дизайнер в свою очередь, должен иметь представление, что он использует, если это фирменный шрифт, то его должна предоставлять компания заказывающая web-сайт.

После того как мы согласились с условием ниже появляется кнопка "Download Your Kit", жмем кнопку, идет процесс генерации и автоматически начинается загрузка архива.

 

Давайте ка заглянем в загруженный архив. Архив именуется приблизительно в такой форме webfontkit-20120219-081059.zip, 20120219 – дата создания, 081059 – порядковый номер. В архиве мы видим файл DSNoteRegular-demo.html, это демо пример, открываем его во всех браузерах и проверяем работоспособность шрифта.

В демо есть 4 вкладки показывающие поведение шрифта в различных ситуациях, а в последней 4-ой вкладке написаны рекомендации по установке шрифта. Итак, мы убедились в корректности работы шрифта, теперь остается только подключить шрифт. В корне архива видим файлы шрифтов *.eot, *.svg, *.ttf и *.woff, их копируем в директорию с главным файлом стилей проекта. Далее находим в корне архива стилевой файл stylesheet.css и видим знакомый нам код.

@font-face {
	font-family: 'DSNoteRegular';
	src: url('ds_note-webfont.eot');
	src: url('ds_note-webfont.eot?#iefix') format('embedded-opentype'),
	     url('ds_note-webfont.woff') format('woff'),
	     url('ds_note-webfont.ttf') format('truetype'),
	     url('ds_note-webfont.svg#DSNoteRegular') format('svg');
	font-weight: normal;
	font-style: normal;

}

Копируем его и вставляем в начало главного файла стилей проекта, очень важно именно в начало, если где-то в середине, шрифты могут, не подключится. Если используется правило @charset, оно должно стоять самым первым, раньше @font-face, чтобы кодировка файла определялась правильно. Осталось только применить, шрифт для этого в css для нужного элемента в font-family устанавливаем имя кастомного шрифта, в моем случае это DSNoteRegular. Технически в правиле @font-face мы можем указать любое удобное для нас имя шрифта в разделе font-family это не принципиально, главное это же название использовать и для подключения к элементам. Да и не забываем о том, что шрифт подгружается, т.е. он потенциально подвержен тому, что может, не загрузится, или из-за какой-то системной ошибки не захотеть распознаваться браузером, поэтому как всегда обеспечиваем цепочку безопасных шрифтов, которые придут на помощь в случае проблем.

p {
	font-family: DSNoteRegular, Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}

С этим разобрались, но у нас остался не затронутый экспертный режим.

 

Режим эксперта, дает нам возможность очень тонкой настройки генерации шрифтов, внушающее количество настроек позволит добиться максимально оптимального результата для конкретной ситуации. Пройдемся по порядку.

Font Format: название говорит само за себя, тут мы выбираем какие форматы шрифтов нас интересуют. В нашем распоряжении TrueType, EOT Lite, WOFF, SVG, а так же SVGZ. Набора указанного на скрине выше вполне достаточно для полноценной работы шрифтов в любом браузере, который поддерживает @font-face.

Rendering: Содержит в себе три параметра отвечающих за отображение шрифта. Apply Hinting, отвечает за нормализацию начертания контуров шрифта при его растеризации, в общем-то это относится в частности к пользователям Windows, рекомендуется оставлять этот параметр включенным. Подробнее о том, что такое hinting, можно почитать в wiki. Следующий параметр рендеринга это Fix Vertical Metrics. Он отвечает за правильное отображение верхнего и нижнего отступа шрифта, в любом браузере и на любой платформе, так же рекомендуется оставить включенным. Последний параметр Remove Kerning, во включенном положении выключает нахлест символов, так же этот параметр значительно уменьшает финальный размер файла шрифта. В некоторых случаях это может быть оправданно если браузер не может правильно отработать кернинг, почему бы не сэкономить на размере файла. О кернинге снова читаем на wiki.

Fix Missing Glyphs: здесь мы включаем возможность добавить символы пробела и дефиса в Unicode, в случае если они отсутствуют в шрифте.

X-height Matching: x-height это высота от базовой линии до средней линии измеренная относительно символа "x" латинского алфавита. Устанавливая этот параметр в соответствии с одним из приведенных примеров безопасных шрифтов, мы делаем некую обратную совместимость. X-height кастомного шрифта и безопасного шрифта, который в случае чего станет на замену, будут одинаковыми, тем самым не нарушая вертикальный ритм.

Protection: включение WebOnly™ приведет к такому преобразованию шрифта, которое не позволит установить его в системе, а только лишь использовать в web-приложениях. Видимо данная функция позволяет некоторым образом защитить шрифт, предназначенный сугубо для web по лицензии, от установки на десктопы.

Subsetting: Одна из самых важных настроек, многие на ней часто спотыкаются. Этот раздел отвечает за набор символов в шрифте. Например, можно отключить неиспользуемые символы, таким образом, уменьшив объем файла. Но тут нужно быть внимательным. Есть два основных варианта Basic Subsetting и Custom Subsetting…. Первый предоставляет базовый набор символов, в него входят знаки западного языка, если же нужно использовать кириллические символы данный пункт не подходит. Второй пункт дает нам возможность выбирать включаемые символы абсолютно свободно.

 

Character Type: выбор символов, опираясь на определенные типы.

Language: выбор символов по языковой принадлежности. Например, если нужна поддержка английского и русского алфавита, отмечаем English и Cyrillic.

Unicode Tables: набор дополнительных символов Unicode таблицы.

Single Characters: в это поле можно вписать набор необходимых символов, которые требуется включить в состав.

Unicode Ranges: это поле предназначено для добавления символов в виде Unicode множеств. Например: 0021-007E,00E7,00EB,00C7,00CB.

Subset Preview: Это самый обычный предпросмотр включенных символов.

С набором символов разобрались, далее нас встречает раздел CSS Formats. Он отвечает за выбор синтаксиса описания кроссбраузерного правила @font-face. О разных подходах говорилось в начале статьи. Предпочтительно выбирать синтаксис Fontspring Syntax, так как он является самым прозрачным и ориентированным на будущие девайсы при этом совместим и с устаревшими браузерами.

В разделе CSS Options: включая пункт Base64 Encode, мы внедряем шрифт прямо в css, но EOT и SVG шрифт закодированы не будут, потому как нет поддержки в такой форме. Пункт Style Linking отвечает за включение свойств font-weight и font-style в соответствии с их базовыми значениями, но данная функция заявлена как не полностью кроссбраузерная.

OpenType Options: можно отметить различные функции сглаживания, если шрифт их поддерживает, то генератор выполнит отмеченные действия.

Advanced Options: в дополнительных опциях, можно указать префикс шрифту в поле Font Name Suffix. Em Square Value отвечает за размер контурного масштабирования, этот параметр актуален для Windows, лучшим значением является 2048, это связано с качеством и скоростью отрисовки шрифта.

И наконец, можно запомнить настройки, на будущее, поставив галочку в пункте Remember my settings.

Вот собственно и все, что мы можем сделать в экспертном режиме, как видите все очень подробно и гибко. Теперь вы можете подключить любой шрифт к веб-сайту, с помощью данного инструмента, без всяких проблем главное не переборщить ;).

На этом все. Всем удачи, всем пока!

P.S. Это тоже может быть интересно:

23 Комментарии

  1. SilentImp

    Вы бы упомянули еще
    http://www.font2web.com/
    И то, что Font Squirrel, скотина, не будет конвертировать шрифты MS и Adobe.
    Причем даже если из них вытереть метаданные. Хотя скорее всего я их просто недотер.

    1. psywalker

      Да, но тут уже ничего не попишешь. Стоит учитывать, что шрифты MS и Adobe лицензионные и что на генераторах стоит предохранитель на такие вещи.
      Наши ребята стараются искать фришный аналог среди тех, что сама белка уже предоставляет.

      1. SilentImp

        На самом деле — попишешь. Надо просто подумать как оно вычисляет шрифты MS и Adobe и удалить нужные данные из шрифта.
        Я вообще думал, что это метаданные … но вроде бы все удалил, а шрифт все равно опознавался. Ислледование на эту тему — отличная тема для статьи.

    2. Anonymous

      Не дотёр) Легко стирается, меняй сигнатуру MS## (вместо ## два пробела) на любую другую, и проверка провалится. У Adobe не знаю какая сигнатура, нет их шрифтов на руках, но наверняка убирается так же.

      1. elepsion

        Скажите пожалуйста, какой программой это можно сделать?

  2. SilentImp

    Кстати, когда все же не получается конвертировать какое то коварное Calibri, то будет полезен вот этот сайт:
    http://cssfontstack.com/

    1. Alex

      Уважаемые, а как же быть с Opera ниже десятки?

      1. psywalker

        Отправить её в музей и водить людей на экскурсии потом)

  3. walkman

    все делаю по инструкции, шрифты получаются кривыми, буквы пляшут.

    некоторые толще других, какие-то по высоте меньше чем остальные.

    в чем может быть причина таких глюков? с каким пунктом стоит поиграть.

    1. SilentImp

      Я подозреваю, что вам не нравится сглаживание шрифта …
      Но по вашему описанию это может быть что угодно.
      Пример на jsfiddle выложите … или еще где то…

  4. walkman

    fix gasp table надо чекать?

  5. Aharito

    Поразбирался, потестил.

    Жаль, но с Оперой работает некорректно, все тот же известный баг, что и у Google Web Fonts.
    Баг состоит в следующем — если у человека кириллическое имя пользователя на Винде, напрмер C:\Users\Иван\, то вышеописанные шрифты этим способом НЕ отображаются.

    Разработчикам Оперы неоднократно писали про этот косяк, но они почему-то не исправляют баг. Он перечеркивает всё — ведь у нас в России Opera почему-то популярна. Судя по Метрике, мои сайты в 20% случае смотрят именно на Опере.

    Так что жаль.

    P.S. У меня Опера 11.64.

    1. Aharito

      UPD: Слава Богу, в 12-й Опере этот баг исправлен.
      И вдвойне слава Богу, что Опера обновляется довольно стремительно — старой 11-й версией пользуются уже менее 3% посетителей.
      Можно наконец забывать про Куфон и пользоваться логичным методом @font-face.

  6. barabek

    Здравствуйте!
    такая проблема: если загрузить web fonts для регистрации на сайте в окне, то в опере если есть подсказки email (ctrl F12, вкладка формы) то эта подсказка вылезает черной полоской, подскажите,как это исправить?

    1. SilentImp

      Ничего не понял. Сделайте тесткейс и дайте на него ссылку.
      Кроме того, вы не ошиблись с местом, где задали вопрос?

  7. Никита

    Добрый вечер. 
    Выбираю режим Expert, потому что нужна поддержка англ. языка, но не понимаю, что сделать, чтобы font-weight: bold можно было использоват на сайте.
    Подскажите, пожалуйста.

    1. Никита

      Ставлю style link, всё равно не катит. В режиме optimal только русские буквы отображаются новым шрифтом, но font-weight работает.

  8. Владимир

    Здравствуйте!
    В режиме EXPERT преобразую 2 шрифта одного семейства (PT sans narrow): regular (ptn57f) и bold (ptn77f), но полученный bold — реально не жирный.
    В демо-html к обоим шрифтам:
    font-family: 'pt_sans_narrow'.
    Хотя в режиме OPTIMAL (где нет кириллицы) названия семейств — разные: pt_sans_narrow_regular и pt_sans_narrow_regular), и
    шрифт bold, как и положено, оказывается жирным.
    Может быть, знаете, в чем ошибка?

    1. Aharito

      Вот это я так и не понял — "названия семейств – разные: pt_sans_narrow_regular и pt_sans_narrow_regular)".
      Где ж они разные, когда они одинаковые?
      Тем не менее, дам совет. Для жирного шрифта bold (ptn77f) в режиме EXPERT вручную исправьте font-family: 'pt_sans_narrow' на font-family: 'pt_sans_narrow_bold' . И впоследствии на сайте и пользуйтесь этим семейством там, где нужен жирный.
      А то получается, что у вас два разных шрифта имеют одно и то же имя семейства.

      FontSquirrel же, хоть и умный, не обязан все делать правильно. Тем более, что семейство вы можете обозвать так, как вам нравится, хоть my_best_font, чтоб враги не догадались :)

  9. Дмитрий

    Не хочет белка нормально конвертировать шрифты семейства Agora.  Делает все уродливым (не просто сглаживание, а вообще ломает символы, будто они из совсем не похожей гарнитуры становятся), в чем может быть дело, не подскажете?

    1. SelenIT

      Попробуйте поэкспериментировать с хинтингом (по моему опыту, лучше ставить не оставлять исходный хинтинг, а позволять «белке» делать свой). Еще можно попробовать подгонять X-height Matching (выставить напр. 105% — иногда разительно улучшает отображение шрифта в мелком размере). Мне недавно как раз помогло.

      1. Дмитрий

        Скажите, а что такое хинтинг?
        Только не говорите, что « ХИНТИНГ — метод снижения визуальной заметности дефектов изображения линий контурных шрифтов. При использовании хинтинга нарушение ровности края вертикальных линий в ряде шрифтов выравнивается.»
        Какими-нибудь другими словами, если можно.

  10. WeB XaSeR

    Если использовать только форматы EOT, TTF и OTF — во всех браузерах будет работать? SVG слишком тяжеловесный.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.