Нестандарный шрифт. Быть ему или нет?

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

Проблема

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

А теперь представь, что верстаешь сайт, у которого в месяц будет 100 000 уникальных посетителей. Какая вероятность того, что у всех или хотя бы у большинства из них будет установлен нужный шрифт? Почему-то мне кажется, что она будет равна или почти равна нулю. Это главное отличие от безопасных шрифтов, которые присутствуют у подавляющего большинства пользователей веб.

Решение 1 — образумить дизайнера, заказчика, руководителя проекта

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

Решение 2 — использование картинок

Быдлометод. Текст вставляем картинками. До недавнего времени — это был в принципе единственный способ, не считая flash.

Твои аргументы против:

• отсутствие гибкости — владелец сайта будет практически лишен возможности самостоятельно изменять и добавлять надписи сделанные с помощью картинок. Чтобы внести изменения нужны как минимум навыки работы с photoshop («нарисовать» новую надпись, вырезать ее), а зачастую еще и навыки верстальщика, чтобы править стили;
• слабое СЕО — поисковики плохо умеют читать картинки (применимо к заказчику, который свято верит, что СЕО методы завтра ему приведут миллион посетителей…а может даже два);
• черепашья скорость загрузки — современный сайт и так насыщен графикой. Давай еще и текст сделаем картинками, чтобы пользователь наверняка не дождался загрузки страницы;
• нагрузка на сервер — каждая отдельная картинка — это дополнительный напряг для сервера. Поверь, он и так без дела не простаивает (актуально для высоконагрузочных проектов);
• деньги за трафик — больше картинок, больше трафик, больше за него платить (актуально для умеющих считать деньги владельцев сайтов или просто скупердяев);
• неудобство пользователю — нельзя выделить и скопировать текст, который сделан картинкой.

Заметка

Несколько улучшить ситуацию с СЕО может метод подмены, а со скоростью загрузки метод спрайтов.

Решение 3 — sIFR

Во время загрузки страницы обычный текст подменяется на flash-объект.

Аргументы за:

• получаем нужный результат кроссбраузерно
• владелец сайта спокойно может редактировать текст
• текст выделяется и копируется
• хорошая СЕО

Твои аргументы против:

• требуется наличие включенного js и установленного flash
• требуются навыки подготовки такого шрифта для сайта (работа с какими-то флеш-программами)
• параметры текста (вроде цвета, размера, жирности) так просто не изменить
• дополнительные внешние файлы, что не лучшим образом скажется на скорости загрузки
• много флеша на странице тоже не лучшим образом скажется на скорости работы сайта

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

Решение 4 — js-плагин Cufon

Во время загрузки страницы обычный текст заменяется SVG (для поддерживающих стандарты браузеров) или VML (для IE) объектом. В этих графических объектах буквы отрисовываются графически с помощью javascript.

Аргументы за:

• получаем нужный результат кроссбраузерно
• минимум внешних файлов при любом количестве текста с нестандартным шрифтом
• просто внедрять
• владелец сайта спокойно может редактировать текст
• параметры шрифта (размер, жирность, цвет) легко изменить
• есть реакция на hover
• возможность добавления тени тексту (text-shadow. В IE правда тень будет не совсем такая как нужно)
• защита используемого шрифта от копирования
• возможность разложить шрифт на только нужные символы для уменьшения размера файла-шрифта

Твои аргументы против:

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

Познакомиться детальней с практическим применением Cufon.

Решение 5 — @font-face

@font-face — это такое CSS правило, которое позволяет импортировать внешний файл шрифтов в документ. Это значит, что если у пользователя не установлен нужный шрифт, он подгрузится с сервера без установки в операционную систему. Тебе всего лишь нужно добавить пару правил в CSS. То чего и ждали многие годы! Ура!

Познакомиться детальней с практическим применением @font-face.

Аргументы за:

• гибкость — владелец сайта может как угодно менять любые тексты;
• текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО

Твои аргументы против:

• не всеми браузерами поддерживается: понимают IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+
• большой вес шрифта — может достигать нескольких мегабайт (нужно с умом подбирать шрифт для сайта)
• пока подгружается шрифт, пользователь в одних браузеров (IE, Firefox, Opera) видит отображение текста обычным шрифтом, в других браузерах — вообще не видит текст (Safari, Chrome)
• дорогой шрифт могут стырить, а за это владельца сайта пригласить в суд. Твой долг предостеречь о возможных последствиях.
• могут проскакивать мелкие баги при ховере — не перекрашиваться полностью текст (Safari, Chrome, Opera)
  
• большая трудоемкость (надо оптимизировать шрифт, переконвертировать в EOT) — дольше делать, дороже стоит работа

Решение 5 — динамическая подмена с помощью PHP

На мой взгляд нереальное извращение. Кому охота расширить свой кругозор, а может даже попробовать метод в деле, идем сюда — List Apart :: Dynamic Text Replacement.

Главный вопрос — так можно ли сейчас внедрять нестандартные шрифты?

Можно. Только осторожно. Мой выбор в сторону симбиоза методов:

• @font-face (для современных браузеров) + cufon (для неподдерживающих @font-face) — для проектов, использующие бесплатные шрифты или для проектов, которые закрывают глаза на нарушение авторских прав
• cufon или картинки (в зависимости от задачи и пожеланий заказчика) — для заказчиков, уважающих авторские права

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

Может пригодиться

• webfonts.info — проект посвященный веб шрифтам
• Google font directory