Cufon — нестандартный шрифт на сайте. Рано или поздно, при разработке макета, возникает необходимость использования нестандартных шрифтов на сайте. Скажем, заказчик хочет чтобы на сайте в заголовках использовался шрифт с фирменного стиля компании. Есть несколько вариантов решения данной задачи:

  1. Использование изображений.
  2. Подключение шрифта через параметр css @font-face
  3. Использование javascript плагина Cufon

Первый вариант, хотя и будет кроссбраузерным, однако ограничит администратора сайта, ведь вряд ли заказчик захочет обращаться к вам каждый раз, когда нужно будет добавить на сайт новые материалы. Второй вариант сработает, однако не во всех версиях старых браузеров. Подробнее об использовании @ font-face читайте здесь.

В этой статье я хочу подробно остановиться на интересном плагине — Cufon. Этот скипт позволяет подключать любые шрифты на Ваш сайт.
Работает он следующим образом: меняет текст на SVG объект, или на VML объект (для Internet Explorer). Cufon — это хорошее решение для подключения своего шрифта на сайт. Он имеет ряд недостатков, которые рассмотрим позже, а сейчас предлагаю подробнее остановиться на подключении Cufon на сайт.

Использование нестандартных шрифтов — Cufon. Шаг 1.

Скачиваем последнюю версию Cufon с официального сайта плагина http://cufon.shoqolate.com и подключаем скрипт в хедере своего сайта.

Использование нестандартных шрифтов — Cufon. Шаг 2.

Идем на вкладку Generator http://cufon.shoqolate.com/generate/. Здесь нам нужно конвертировать свой шрифт так, чтобы его мог использовать скрипт.

В пункте Select the font you’d like to use задаем путь к шрифту на компьютере. Если есть доступные версии жирного шрифта, курсива, жирного курсива, задаем путь и к ним. Обязательно ставим галочку возле пункта The EULAs of these fonts allow Web Embedding (without Adobe Flash).
Следующая опция Include the following glyphs (if available) отвечает за версии шрифта, которые предполагается использовать. Если необходимо, чтобы шрифт поддерживал кириллицу, обязательно поставьте галочку возле пунктов Cyrillic Alphabet и Russian Alphabet.

Во всех следующих пунктах оставляем настройки по умолчанию, только в последнем Terms, нужно согласиться с правилами использования плагина Cufon, поэтому ставим галочку напротив I acknowledge and accept these terms и жмем кнопку Let’s do this. Генератор конвертирует шрифт а файл .js и этот файл нужно подключить на сайте вместе с скриптом плагина Cufon.

Использование нестандартных шрифтов — Cufon. Шаг 3.

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

 Cufon.replace ("h1 ");

Вместо h1 пишем классы, идентификаторы, или объекты, содержание которых нам нужно отображать нестандартным шрифтом и вуаля — готово!

Для того, чтобы скрипт срабатывал на наведение, пишем следующее:

 Cufon.replace ('h1', {hover: true });

Плюсы использования Cufon

  • простой в использовании
  • реагирует на параметр hover
  • удобен для администратора сайта
  • реагирует на параметр css text-shadow.
  • Cufon весит совсем не много, поэтому особо не перегрузит сайт.
  • Достаточная кроссбраузерность — работает даже в IE6, правда в 9 работать отказывается 

Минусы использования Cufon:

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

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