Cufon — Подключаем шрифт на сайт

03 апреля 20:31 2012

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

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

Самые популярные способы подключения шрифтов

  • Картинкой. Вы создаёте в фотошопе изображение с текстом и необходимым шрифтом, потом на сайте уже подключаете эту картинку через тег <img src> или через стили css.

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

    Минусы: Тексты не индексируются, увеличивается вес страницы.

  • @font-face. Очень удобная функция в CSS, принцип работы очень прост – кладёте сторонний шрифт к шаблону своего сайт и в css подключаете шрифт, вот так:

    [css]@font-face {
    font-family: Morena; /* имя шрифта для CSS правил */
    url(path-to/Morena.ttf); /* загружаем шрифт по указанному пути */
    }[/css]

    После этого, шрифт «Morena» можно использовать в дальнейшей вёрстке макета.

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

Подключаем шрифт с помощью Cufon

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

Процесс установки

С начало надо подключить к сайту библиотеку Cufon, для этого в <head> вашего шаблона добавте вот такой код:

[java]<script type="text/javascript" src="http://cufon.shoqolate.com/js/cufon-yui.js"></script>[/java]

После этого надо сгенерировать шрифт, для этого переходите на официальный сайт куфона:

Cufon - Подключаем шрифт на сайт

Генерация происходит очень просто, вот несколько советов:

  • Загружать надо оригинальный шрифт, а не какую-нибудь не доделку. Загружаем шрифт в Regular typeface, если вы хотите ещё использовать наклонный или жирный шрифт, то надо будет загрузить шрифт ещё в Bold typeface и Italic typeface;
  • Далее выставляем галочки у нужных для нашего сайта символов. Можно поставить галочку сразу на All, но тогда вес скрипта будет максимальным, поэтому можно его уменьшить, путём выбора только нужных символов;
  • В самом низу не забудьте согласиться со всеми правилами и условиями сервиса;
  • Всё, мы сделали основные настройки, теперь нажимайте кнопку — Let’s do this!

После этого вы получите файл сгенерированного шрифта, который требуется подключить к сайту, сохраните его у себя на хостинге и подключите в <head>:

[java]<script type="text/javascript" src="имя_файла_сгенерированного_шрифта"></script>[/java]

Теперь вы можете использовать гуфон у себя на сайте.

Например, чтобы все тексты в тегах <h1> прорисовывались с помощью Cufon, надо так же в <head> прописать:

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

По аналогии, вы можете так же указывать для других тегов, на вашем сайте.

Тонкости

Много о тонкостях работы с Cufon, описано на сайте — https://github.com/sorccu/cufon/wiki/styling

Так же можно указать дополнительные стили, прямо в вызове функции Cufon:

[java]Cufon.replace("ul.menu", {color:’#FFFFFF’});[/java]

Чтобы было меньше ошибок и нестыковок в работе скрипта, советуют его использовать одним из первых, то есть лучше всего вызывать гуфон перед другими скриптами на javascript.
[sc name=»728 text» ]

Если вы живете в Киеве и вам необходимы услуги по комплексной уборке помещений (жилых и нежилых), клининговая компания Киев проведет данные работы с соблюдением всех стандартов качества.