Почему font-face не работает, используем Cufon нестандартные шрифты
 

Почему font-face не работает, используем Cufon нестандартные шрифты

12 марта 2014 7:42 Категории: Программирование

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

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

Безопасными web-шрифтами являются следующие шрифты:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

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

Если же вам необходимо использовать нестандартные шрифт, то советую использовать font-face:

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

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

Для использования Cufon необходимо выполнить следующие шаги:

  1. Перейти на сайт Gufon и сгенерировать js файл необходимого вам шрифта: http://cufon.shoqolate.com/generate/, в моем случае это был файл ParkAvenu.js.
  2. Скачать сам движок для рендеринга: http://cufon.shoqolate.com/js/cufon-yui.js.
  3. Подключить эти два js файла, как обычные javascript файлы:
  4. Указать элементы, которые будут отрисованы с использованием нестандартного шрифта.
  5. Немного позаботиться о пользователях с IE и дописать перед тегом </body> следующий код(ускоряет загрузку):
  6. Сохранить файлы в кодировке UTF-8. Cufon не поддерживает другие кодировки.

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

  • JS не рулит, юзать лучше всего нативный font-face, только подключать шрифты для всех браузеров в форматах .ttf, .otf, .eot, .woff and .svg

    • Как вариант решения тоже подходит, но не всегда есть шрифт во всех форматах. Иногда js все же будет разумнее применить.

      • Ха, гугл в помощь, одним кликом можно конвертировать шрифт во все эти форматы

  • Akurganow

    Никогда не используйте cufon, это зло вот нормальный конвертер, пользуйте его http://www.font2web.com/

    • Я тоже только им и пользуюсь!)