Использование нестандартных шрифтов на сайте

18 января 2013 / Комментариев нет

Очень часто клиенты просят использовать в дизайне сайта свой корпоративный шрифт или шрифт из свободного доступа, но отличный от привычных шрифтов Tahoma или Verdana. В дизайне сайта реализовать это не сложно, но как использовать нестандартный шрифт при верстке сайта. Сегодня рассмотрим, как встроить нестандартный шрифт на сайт, и назначить его для основных заголовков h1, h2, h3.

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

Заголовок h2 на сайте

Существует несколько способов, как использовать нестандартные шрифты на своем сайте. Это можно сделать при помощи сервиса Google Web Fonts, технологии Cufon.
Эти способы имеют как свои плюсы, так и минусы.

Мы рассмотрим другой способ, который справляется с поставленной задачей быстро и грамотно. Мы осуществим это при помощи конструкции @font-face. Этот способ существует достаточно долгое время, но широкое применение получил с развитием web 2.0, когда все больше разработчиков сайтов стали использовать в дизайне нестандартные шрифты, что придавало им большей индивидуальности. Сейчас включения нестандартных шрифтов на веб-сайтах можно наблюдать почти повсеместно, чему способствует появление большего количества свободнораспространяемых шрифтов.

Выбор шрифта и начертаний.

В качестве нестандартного шрифта будем использовать PT Serif — общедоступный шрифт от комании ПараТайп.
Первое, что необходимо сделать — это скачать себе на компьютер выбранный шрифт. Ссылка для скачивания.
Далее распаковываем папку и выбираем нужные нам начертания.
Выберем PT Serif Regular и PT Serif Bold — этого будет достаточно, чтобы выделить заголовок и подзаголовок.
Теперь нам нужно подключить эти файлы шрифта к нашему сайту.
Воспользуемся удобным сервисом: @font-face Generator. Этот сервис создает из исходных файлов шрифта необходимые для подключения в вебе, а именно: файлы форматов TrueType, WOFF, EOT Lite или EOT Compressed и SVG.

Кратко о форматах.

TrueType — был разработан в 1980 году. Формат приобрел большую популярность, вытеснив множество других, которые существовали на тот момент. Компания Microsoft стата использовать этот формат для стандартного набора системных шрифтов Windows.

OpenType — формат основан на TrueType, но в него встроены дополнительные элементы: лигатуры, контекстные символы. К сожалению, не все браузеры поддерживают формат OpenType.

EOT (Embedded OpenType — встраиваемый OpenType) — В отличии от TrueType и OpenType, формат предоставляет такие возможности: шрифты EOT более компактны, чем OpenType, шрифты EOT могут использоваться только в пределах домена, что решает проблему с лицензионным использованием шрифта. Internet Explorer поддерживает данный формат с 1990 года.

WOFF (Web Open Font Format — открытый формат для веба) — формат рекомендован организацией W3C, которая опубликовала первую версию формата в июле 2010 года. WOFF это новое скрещивание форматов TrueType и OpenType, что не делает из него новинку.
WOFF использует алгоритм, который позволяет сократить размер файла на 40%. В файлы формата WOFF можно добавить мета данные о лицензии.
WOFF поддерживает Firefox, начиная с версии 3.6, и Google Chrome, начиная с версии 5.0.

SVG (Scalable Vector Graphics — масштабируемая векторная графика) шрифты содержат элементы, представленые в виде векторных изображений. В отличие от других форматов, SVG шрифты не могут быть сжаты. iOS 4.2 — это первая версия Mobile Safari, которая поддерживает данный формат. Но это и единственный формат шрифтов для отображени информации на iPhone и iPad, которые работают на iOS 4.2.

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

Работа с сервисом @font-face Generator

Поочередно загружаем файлы шрифта при помощи кнопки «Add Fonts»

Загрузка файлов шрифтов в @font-face Generator

После загрузки мы видим названия начертаний шрифта и количество символов, переходим к настройкам

Загруженный шрифт

Устанавливаем переключатель в режим «Expert», только в этом положении станут доступны расширенные опции сервиса.

Расширенные

В строке «Fonts Formats» отмечаем все необходимые форматы шрифта, о которых говорили выше.
Остальные разделы оставляем без изменений.

Расширенные

Далее в строке «Subsettings» устанавливаем пункт «Custom Subsetting». После этого появятся расширенные настройки, где нам необходимо отметить языки, которые будет поддерживать шрифт.
После выбора того или иного языка в поле «Subset Preview» отобразяться символы шрифта на выбранном языке, в случае если данный шрифт не поддерживает выбранный язык, то символов из выбранного языка мы не увидим.
Мы знаем, что выбранный нами шрифт PT Serif поддерживает кириллицу, отмечаем её в списке языков.
На всякий случай отметим и поддержку английского языка.
Важно понять для чего это делается — только те символы, которые входят в выбранные языки будет содержать получившийся в итоге файл шрифта.
Если на данном этапе вы не выбрали поддержку английского языка, а в дальнейшем решили использовать его к англоязычному фрагменту текста на сайте, то изменений не произойдет, так как файл шрифта не содержит символы английского алфавита и фрагмент будет отображен системным шрифтом или основным шрифтом сайта.

Использование нестандартных шрифтов на сайте

Далее в поле «CSS» отмечаем «Style Link» и соглашаемся с тем, что вы собираетесь использовать на своем сайте шрифты, на которые у вас есть разрешение (Yes, the fonts I'm uploading are legally eligible for web embedding.) В данном случае разрешение не требуется, поскольку шрифт из свободного доступа.

После этого становится доступна кнопка «Download Your Kit» (Скачать ваш набор).

Создание файлов шрифта для использования на сайте

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

Распаковав архив, отберем в нем необходимые файлы шрифта в 4 форматах:

Форматы нестандартного шрифта для сайта

Встраивание шрифта на сайт.

Создадим в корне сайта папку fonts и загрузим в неё 8 файлов шрифта, созданного сервисом @font-face Generator.
В архиве, который мы получили по итогам работы с сервисом присутствует файл «stylesheet». Файл содержит css-правила для подключения шрифта к сайту:

@font-face {
    font-family: 'pt_serif';
    src: url('ptf55f-webfont.eot');
    src: url('ptf55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('ptf55f-webfont.woff') format('woff'),
         url('ptf55f-webfont.ttf') format('truetype'),
         url('ptf55f-webfont.svg#pt_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pt_serif';
    src: url('ptf75f-webfont.eot');
    src: url('ptf75f-webfont.eot?#iefix') format('embedded-opentype'),
         url('ptf75f-webfont.woff') format('woff'),
         url('ptf75f-webfont.ttf') format('truetype'),
         url('ptf75f-webfont.svg#pt_serifbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Копируем содержимое файла и добавляем в основной файл стилей (style.css) сайта, указав путь до файлов шрифта в папке fonts:

@font-face {
    font-family: 'pt_serif';
    src: url('http://сайт/fonts/ptf55f-webfont.eot');
    src: url('http://сайт/fonts/ptf55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://сайт/fonts/ptf55f-webfont.woff') format('woff'),
         url('http://сайт/fonts/ptf55f-webfont.ttf') format('truetype'),
         url('http://сайт/fonts/ptf55f-webfont.svg#pt_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pt_serif';
    src: url('http://сайт/fonts/ptf75f-webfont.eot');
    src: url('http://сайт/fonts/ptf75f-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://сайт/fonts/ptf75f-webfont.woff') format('woff'),
         url('http://сайт/fonts/ptf75f-webfont.ttf') format('truetype'),
         url('http://сайт/fonts/ptf75f-webfont.svg#pt_serifbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

После этого остается только назначить новый шрифт заголовкам:

.post_blog h1 {
font-family: 'pt_serif';
}

Нестандартный

Заголовок записи отображается шрифтом PT Serif.

Остается настроить размеры заголовков и присвоить оставшимся нестандартный шрифт.


По той же теме:

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

* - обязательные поля

Добавить комментарий