Ну вот вы и купили новенький и красивый шрифт. Вы уже готовы, вы уже поняли, что хотите этого. Это не остановить. Желание встроить этот шрифт в свой сайт. Нестандартный и очень оригинальный.

Так давайте рассмотрим техническую сторону этого вопроса, а именно:

Как добавить нестандартный шрифт на сайт?

sIFR

Технология sIFR (Scalable Inman Flash Replacement) основана на том, что после загрузки страницы JavaScript заменяет нужные XHTML-элементы на Flash, который содержит в себе необходимый шрифт.

Некоторые факты о технологии sIFR:

  • Если у пользователя не установлен Flash или отключен Javascript, текст элемента будет оформлен посредством CSS.
  • sIFR масштабируется относительно заданному значению размера шрифта в CSS. Причем при изменении размера с помощью Ctrl+Wheel — размер текста sIFR изменится только после перезагрузки страницы.
  • Текст с sIFR успешно выделяется и копируется, при том, что визуально эффект выделения может быть не заметен.
  • sIFR не оказывает никакого негативного влияния на SEO, так как не скрывает изменяемый текст от поисковых роботов и пользователей.

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

Подключение шрифта

Подключение шрифта с помощью технологии sIFR проходит в несколько этапов.

Сначала нам необходимо создать нужный шрифт в формате SWF. Для этого нужно открыть флеш-редактором файл sIFR.fla, дважды щелкнуть на textbox из библиотеки и выбрать желаемый шрифт. После этого нам остается только сохранить наш файл с любым названием (например, названием шрифта, который будет использоваться на сайте) и расширением swf.

После этого копируем содержимое файла sIFR-screen.css в свой стиль и добавляем код замены шрифта .


 sIFR.replaceElement(named({
    nWidth:50,
    nHeight:40,
    sSelector:"body h1",
    sFlashSrc:"имяшрифта.swf",
    sColor:"#000000",
    sLinkColor:"#000000",
    sBgColor:"#FFFFFF",
    sHoverColor:"#CCCCCC",
    nPaddingTop:20,
    nPaddingBottom:20,
    sFlashVars:"textalignОnter&offsetTop=6"
}));

либо в sIFR.js, либо в код HTML.

Cufón

Второй вариант — JavaScript-технология Cufon. Она состоит из двух частей: преобразователя исходного шрифта (TTF, OTF или PFB) в js-файл и парсера готового шрифта.

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

Подключение шрифта

И в этом случае подключение состоит из нескольких этапов.

Первой задачей для нас будет генерация js-файла на базе шрифта, который будет использоваться в дизайне. Сделать это мы можем при помощи утилиты по адресу http://cufon.shoqolate.com/generate/, где, загрузив необходимые начертания, мы получим необходимый нам файл.

Следующим шагом будет скачивание дистрибутива Cufón

Подключаем оба этих файла в наш документ, как самый обычный Javascript:


 <script type="text/javascript" src="./js/cufon-yui.js"></script>
 <script type="text/javascript" src="./js/Имя_нашего_шрифта.js"></script>

Теперь пришла пора выбрать, какие именно элементы страницы мы будем заменять нашим нестандартным шрифтом. Для примера это будет заголовок H1:


<script type="text/javascript">
    Cufon.replace("h1");
</script>

Вот и все, достаточно легко и понятно.

Все параметры, которые касаются оформления текста, берутся из CSS.

@font-face

Набирающим обороты способом встраивания шрифтов является каноничное правило @font-face, до недавнего времени совсем непопулярное в силу слабой поддержки браузерами. Сейчас же таких проблем почти нет: еще в сентябре 2009 года Пол Айриш огласил «пуленепробиваемый синтаксис» для записи деклараций @font-face, который работал во всех браузерах. С небольшим изменением (собственно, в виде Mo’Bulletproofer) он успешно используется и сейчас.

Пол Айриш (Paul Irish) — frontend-разработчик, участник команды Google Chrome's Developer Relations и jQuery. Его силами были созданы HTML5 Boilerplate, Modernizr, CSS3 Please и прочие вещи из будущего.

Mo'Bulletproofer — усовершенствованный синтаксис @font-face Пола Айриша, сочинённый Ричардом Финко, страдает двойной декларацией свойств.

Подключение шрифта


 @font-face {
    font-family: 'МойШрифт';
    src: url('МойШрифт.eot?iefix') format('embedded-opentype'),
    url('МойШрифт.woff') format('woff'),
    url('МойШрифт.ttf') format('truetype'),
    url('МойШрифт.svg#svgFontName') format('svg');
}

Тут все просто: задаем в css название шрифта, которое будет применяться к элементам веб-сайта, посредством font-family.

«Где мне взять мой любимый шрифт в формате svg?»

Тут вам на помощь придет замечательный сервис FontSquirrel, а именно — его генератор @font-face

Google Font API

Наше время. Корпорация Добра

Альтернативным и с каждым днем все более популярным сервисом для работы с нестандартными шрифтами является Google Font API.

В чем же преимущества Google Font API?

  • Он включает в себя выбор высококачественных бесплатных (open-source) шрифтов.
  • Работает в большинстве браузеров.
  • Крайне прост в использовании.
  • Поскольку шрифты находятся в одном и том же месте в Интернете, веб-браузер будет их кэшировать и для других сайтов, загрузив только раз.

Подключение шрифта

Подключение шрифта с помощью Google Font API начинается с увлекательного путешествия по библиотеке шрифтов и выбора необходимого шрифта (или создания набора из нескольких, если это необходимо).

После выбора мы переходим к «Использованию» — следующему этапу нашего путешествия. На экране использования мы видим несколько важных блоков:

  1. Блок выбора начертаний.

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

  2. Блок с наборами языковых символов.

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

  3. Блок выбора способа встраивания шрифта на ваш сайт.

Есть три способа встроить шрифт с помощью Google Font API:

Стандартный

Просто добавить в блок head

<link href="http://fonts.googleapis.com/css?family=Мой<3Шрифт1|Мой<3Шрифт2" rel="stylesheet" type="text/css" />

CSS-код

Просто добавить код в начало вашего CSS


 @import url(http://fonts.googleapis.com/css?family=Мой<3Шрифт);

JavaScript

Этот код нужно добавить в блок head или перед закрывающим тегом body


WebFontConfig = {google:{families:['Мой<3Шрифт::latin']}};
(function(){
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript'; wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

Выводы?

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

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