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

Но что делать, если, как «кровь из носу» нужен другой шрифт на сайте? Мы же не можем заставить пользователя скачать шрифт и установить его в операционной системе. Конечно можно использовать flash, JavaScript или заменять текст графическим файлами с написанными текстами нужным шрифтом. Но это не выход.

Время идет, и появляются новые технологии. Сейчас активно внедряются HTML5 и CSS3. Эти технологии содержат новые возможности. И технология каскадных стилей третьей версии (CSS3 ) позволяет использовать любые шрифты на сайте.

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

Подключаются шрифты следующим образом в css файле сайта:

@font-face {
   src: local("myFont"),
   url(myFont.ttf);
}

Строка src: local("myFont") проверяет, не установлен ли ещё данный шрифт и подгружает его в случае необходимости по адресу указанному в строке url(myFont.ttf).

Совместимость с различными браузерами

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

Каждый браузер живет своей жизнью, а их разработчики по разному включили поддержку шрифтов:

• Internet Explorer поддерживает только формат EOT
• Браузеры Mozilla (Firefox, Seamonkey) поддерживает OTF и TTF форматы
• Safari и Опера поддерживают OTF, TTF и SVG
• Chrome поддерживает TTF и SVG.

Кроме того, мобильные браузеры, такие как Safari на iPhone и IPad требуют SVG формат шрифтов.

Но не огорчайтесь! Для решения проблемы совместимости разработчики придумали выход. Различные способы подключения шрифтов с учётом их формата очень хорошо описаны здесь http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Правда, на английском .

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

@font-face {
  font-family:  "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  font-weight: normal;
  font-style: normal; }

Первая строка устанавливает название загружаемого шрифта. Следующая, даёт инструкцию для загрузки шрифта в формате EOT. Если браузер не поддерживает данный формат, то он просто его проигнорирует. Строка src: local("☺") выполняет трюк, описанный выше. Фактически это правило устанавливает уникальное название для шрифта, чтобы оно не совпало с уже установленным.

Далее, установим правила CSS для тега заголовка h2:

h2 {"Your typeface", Georgia, serif; }

Как видите – это не сложно.

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

Где взять разные форматы шрифтов?

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

Чтобы получить из одно формата все остальные, нужно воспользоваться сервисом Font Squirrel – http://www.fontsquirrel.com/. Добавьте его в список любимых сайтов.

Теперь, всё что вам необходимо, это на страничке http://www.fontsquirrel.com/fontface/generator загрузить свой фйал шрифта в сервис и получить набор шрифтов в различных форматах и готовый код CSS для использования на сайте.

Практика

Загрузите любой из понравившихся шрифтов с сайта http://www.google.com/webfonts#ChoosePlace:select

Я выбрал шрифт Lobster http://www.google.com/webfonts/download?kit=V9dGwk5Wx0cNwNcoYGYKAqCWcynf_cDxXwCLxiixG1c

Загрузите в http://www.fontsquirrel.com/fontface/generator выбранный вами файл. Обязательно выберите режим Expert

и поставьте галочку для использования кириллического набора символов.

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

Загрузите готовый набор себе на сайт.

Сохраните и распакуйте архив полученный с этого сервиса. В этой папке будут такие файлы, которые нам нужны:

Шрифты

• lobster-webfonts.eot
• lobster-webfonts.svg
• lobster-webfonts.ttf
• lobster-webfonts.woff

Готовое правило для CSS:

stylesheet.css

Скопируйте файлы шрифтов в папку content\skin вашего проекта SiteEdit.

Добавьте из файла stylesheet.css правила для @font-face и правило для тестового стиля .lobster в CSS файл вашего сайта:

Теперь создадим отдельную страницу на своём сайте, на котором мы хотим использовать нестандартный шрифт:

Создадим новый раздел и в HTML коде раздела напишем такую строку с использование нашего правила для шрифта:

Вот так должна выглядеть страница после изменений:

Выгрузите изменения проекта на сайт.

Вот так сайт выглядит в веб-браузере http://skstudio.com.ua/lobster-font-demo :

Всё очень просто.

Чтобы вы могли использовать нестандартный шрифт для всего сайта и всех тегов, укажите такое правило для главного HTML тега вашего сайта (на примере шрифта lobster):

html {
    font-family: 'Lobster1.4Regular';
}

Успехов! Практикуйтесь! И у вас будут получаться отличные сайты!

Если вам понравился данный пост:

• Добавьте ваш комментарий,
• Поделитесь этим постом у себя на блоге,
• Поделитесь этим постом в социальных сетях.

Большое спасибо!

P.S. Если вы хотите получить видеоурок по этой теме, то разместите ссылку на эту статью у себя на блоге, ваших социальных статьях и в комментариях к этой статье напишите ваш отзыв и укажите ссылки, где вы опубликовали анонс статьи.