О нестандартных шрифтах
Как только браузеры начали более-менее поддерживать @font-face, так веб дизайнеры сразу ринулись применять любимые, красивые, необычные (и т.д.) шрифты. При чем в особо тяжелых случаем, подобные шрифты распространяются не только на заголовки и меню, но и на основной текст, а иногда даже логотип просят сделать текстом.
Разнообразие, запоминающийся дизайн — это все, конечно, нужно. Но в первую очередь работа дизайнера должна следовать целям проекта. Давай разберемся, чем грозят проекту нестандартные шрифты.
1. Различное отображение шрифта в разных браузерах и разных платформах
Дизайнеры рисуют макеты в мощных графических редакторах, вроде Photoshop и Corel Draw, где шрифты выглядят очень привлекательно. Но это не значит, что они так же будут выглядеть в браузере! В каком виде увидит текст пользователь зависит от используемых платформы и браузера. Отображение можно очень сильно отличаться как от первоначального макета, так и от браузера к браузеру.
Это касается не только внедренных шрифтов, за стандартными тоже наблюдается такой «грешок», но так как эти шрифты присутствуют на рынке десятилетия, браузеры научились их отображать как минимум очень близко к тому, что мы видим в макете (если не учитывать отсутствие сглаживания на Windows). Чего не скажешь о нестандартных шрифтах, где результат может быть непредсказуемым: буквы могут быть тоньше/толще, межбуквенное расстояние может быть иным, высота строки может отличаться — в добавок как следствие может быть искажена сетка дизайна. А иногда текст вообще может быть нечитабильным. И чем шрифт «моложе», тем больше вероятность нарваться на сюрпризы.
Заметка
Некоторые проблемы можно решить использованием картинками или Cufon. Эти решения могут устранить визуальные различия, но при этом имеют свои недостатки.
Как ни странно за такие «косяки» винят верстальщика, мол не смог перенести в точности в Веб задумку дизайнера. В идеале дизайнер должен знать как поведет себя тот или иной шрифт прежде, чем его использовать. В менее идеальном — команда должна быть готова пробовать альтернативные шрифты, пока не получит удовлетворительный результат.
Вывод 1
Использование нестандартных шрифтов может привести к не ожидаемым результатам, к увеличению сроков разработки, к увеличению финансовых вложений.
2. Более медленная загрузка страницы
Плохая новость: один дополнительный шрифт — это дополнительный запрос к серверу — дольше открывается страница.
Хорошая новость: дополнительный запрос будет только при первом посещении сайта пользователем. Затем шрифт попадет в кэш.
Плохая новость: кэш не безразмерный и имеет время жизни, поэтому если пользователь посещает твой сайт раз в месяц или реже, высока вероятность, что дополнительный запрос будет при каждом новом посещении.
Еще одна плохая новость: если использовать FHOS-сервисы (хостинги шрифтов) получим вместо одного дополнительного запроса (файл шрифта), как минимум еще один (CSS или JS, которые потребуется вставить). А если рассмотреть эти сервисы внимательней, можно обнаружить еще ряд недостатков.
Google Fonts
Чтобы использовать шрифты серверов гугла достаточно просто подключить их CSS:
<link rel="stylesheet" href="">
Плюс: за нас обо всем подумали и сделали. Минусы:
- Не можем самостоятельно контролировать содержимое CSS: синтаксис получаем такой как посчитали нужным разработчики Google.
- Не можем определять необходимый набор символов, чтобы сократить вес шрифта: все время грузим полный набор символов.
- CSS не кешируется.
Typekit
Typekit предоставляет коллекцию шрифтов с возможностью их использования с их серверов. Вот только со скоростью загрузки дела обстоят похуже, чем у Google. Подключение:
<script type="text/javascript" src=""></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Сходу получили дополнительный запрос в виде внешнего скрипта. Ну а потом этот скрипт начинает грузить:
- CSS файл, который не кешируется;
- скрипт Google Analitic (откуда он берется, так сразу и не определил);
- иконку «шрифт с Tykekit»
- ну и сам шрифт.
Замечу, что это весь это «набор» мы получаем заплатив за шрифт приличную сумму. Сервис таким образом пробует защитить права на шрифт, ведь тут используются коммерческие. Но если я беспокоюсь о скорости загрузки страницы, не стал бы подключать шрифты таким образом.
В данной статье рассмотрел пару наиболее популярных сервисов чтобы обрисовать суть проблемы. У остальных сервисов дела обстоят примерно так же.
Самым быстрым вариантом будет использование своего CSS, своего оптимизированного шрифта, и своего сервера с настроенным gzip и кешированием. Вот только количество шрифтов, которые таким образом можно без проблем внедрять и которые поддерживали бы кириллицу, весьма ограничено.
3. Худшее первое впечатление
Пока не загружен шрифт текст отображается стандартным шрифтом, как только загрузился нестандартный, вид текста меняется. В данном случае могут возникнуть такие проблемы:
- пока грузится шрифт, сайт может выглядеть совершенно иначе, а в некоторых случаях даже быть «поломанным».;
- если пользователь начал чтение контента до того как загрузился шрифт, то после его загрузки текст может «прыгнуть» и взгляд пользователя по тексту окажется на две-три строки ниже (выше), чем был.
- в webkit пользователь вообще может наблюдать белый лист пока не загрузится шрифт.
Этот недостаток тоже касается только первого посещения. Как только шрифт попадает в кеш, все работает замечательно. Вообще эти недостатки можно свести к минимуму, если подобрать максимально похожие аналоги по своим характеристикам из стандартных шрифтов.
Пришли к выводу: чтобы и первая загрузка выглядела привлекательно, нужно потратить больше времени, чем просто пописать в CSS @font-face.
4. Проблемы с «тыренными» шрифтами
В наших странах пока мало кого волнуют вопросы авторских прав и то что авторы недополучат денег за свой труд. Поэтому смело используем шрифты на шару, хотя в реальности они могут стоит сотни долларов. Могут ли последовать какие-то санкции?
Теоретически — да. Практически — об этом стоит беспокоится только крупным проектам и проектам ориентированным на западный рынок.
Заметка
Тема касается только внедрения нестандартных шрифтов с помощью @font-face, т.к.шрифт тогда можно украсть. При использовании нестандартных шрифтов с помощью картинок или Javascript — все гораздо проще. Вообще тема лицензирования шрифтов выходит за рамки данной статьи.
Это потенциальные неприятности, которые могут и не прийти. Но есть и реальные трудности: с некоторых пор появились технические проблемы внедрения подобных шрифтов через @font-face. Сервисы, которые позволяли перегнать шрифт в веб форматы (та же белка), отказываются обрабатывать шрифты, занесенные в их «черный» список. В лучшем случае получится найти сервис, который не имеет таких списков, в худшем придется использовать TTF или OTF, которые в необработанном виде могут весить очень много. Хорошо когда дизайнер это понимает и предварительно посмотрит вес используемого им шрифта.
Итого о недостатках
Как видно недостатков хватает. И чем больше различных шрифтов будет подключено к странице, тем плачевнее результат.
Какие выводы напрашиваются
@font-face — это такой же инструмент веб разработчика как и остальные. Чтобы все работало как отменно, нужно инструмент грамотно использовать. Поэтому, прежде чем использовать нестандартные шрифты, нужно задаться вопросами:
- а оно того стоит?
- а немного ли шрифтов внедряется?
- а удачный ли шрифт выбран для Веб?
- а как он будет внедряться на сайт?
А на месте веб разработчиков, я не стал бы забывать о Cufon и картинках.