Добавляем уникальный шрифт на сайт

Добавляем уникальный шрифт на сайтЭта статья будет интересна абсолютно всем читателям моего сайта. Так как ее можно использовать в любой CMS, будь-то Ucoz, Joomla, WordPress или просто сайт сделанный ручками из одной страницы.
Для начала приведу пример, как это работает. Загляните на главную страничку этого сайта. Блоки в центре «Работа на дому», «Дом, семья и я сама» и «Создание сайта» написаны каллиграфическим шрифтом. Именно о таком варианте я и хочу рассказать.
Первым делом, укажу на минусы и плюсы, предлагаемого варианта.
Плюсы:
1. вариант универсален и позволяет задать одинаковый красивый шрифт для всех браузеров
2. вариант прекрасно индексируется поисковиками (возможная ему замена вставка изображения с текстом уже не индексируется как текст)

Минусы:
1.Вы, я думаю, заметили, что шрифт подгружается не сразу. И первоначально виден вариант шрифта по умолчанию и только спустя несколько секунд появляется красивый шрифт. Чем быстрее скорость загрузки, тем меньше видно эту разницу. Возможно, кто-то меня поправит и укажет на возможную ошибку. Я , к сожалению, победить это дело не смогла.

Итак, приступаем к реализации.
1. Заходим на сайт http://cufon.shoqolate.com Нажимаем кнопку Download и сохраняем страницу как cufon-yui.js . Этот скрипт и будет работать с нашими шрифтами.
2. Теперь подбираем шрифт, который мы хотим использовать у себя на сайте. Он должен быть установлен на Вашем компьютере. Скачать шрифты в Интернете можно в большом количестве, так что выбор за Вами.
3. Выбранный шрифт нам надо обработать. Для этого На этом же сайте нажимаем кнопку Generate. Здесь Regular typeface — выбираем файл шрифта, а далее ставим нужные галочки. Не увлекайтесь лишними галочками, потому что каждая галочка увеличивает размер файла. Я, например, поставила только следующие поля: Punctuation и Russian Alphabet . Если Вам нужны еще и цифры и английские символы, то ставьте и другие соответствующие галочки. Внизу ставим галочку I acknowledge and accept these terms (я ознакомлен с правилами) и Жмем Let’s do this . К нам на компьютер скачивается еще один скрипт. В моем случае это AllegroScript_italic_400.font.js .
4. Осталось совсем немного. Закачиваем оба полученных файлов на сайт (Для тех, кто в танке файлы cufon-yui.js и файл из пункта 3 , используя файловый менеджер ). Открываем шаблон своего сайта и добавляем перед закрывающимся тегом (в самом конце шаблона) следующий код

Code
<script type=»text/javascript» src=»fonts/cufon-yui.js»></script>

<script type=»text/javascript» src=»fonts/AllegroScript_italic_400.font.js»></script>

<script type=»text/javascript»>
   
  Cufon.replace(‘h1′, { fontSize: ’28px’ });
  Cufon.replace(‘h2′, { fontSize: ’28px’ });
  Cufon.now();
</script>

Поясню его подробно. Файлы я закачала в папку fonts, если Вы закачали в другое место, просто укажите другой путь.
Если Вы хотите выделить шрифтом просто все теги h1, то достаточно написать Cufon.replace(‘h1’);
Я написала Cufon.replace(‘h1′, { fontSize: ’28px’ }); потому что вместе со сменой шрифта хочу поменять и его размер, так как исходный размер получается слишком маленьким, но это проблемы конкретно выбранного мною шрифта.
Следующей строкой я делаю то же самое с тегом h2
а вот если бы я захотела изменить шрифт например в таком куске кода
Code<div id=»#newfont»>

<p>Текст с измененным шрифтом</p>

<p>Текст с неизмененным шрифтом</p></div>
я бы написала так
Cufon.replace(‘#newfont p’);
Еще один момент. Я пробовала ставить скрипт в разные места шаблона. Он работает и в начале и в конце. Единственное, где он отказался работать — это между и . Я предложила поставить в конец только потому, чтобы он не мешал быстрой загрузке страницы. Это я к тому, что Вы можете поставить его в глобальный блок, дабы не выводить ручками в каждом шаблоне (если у Вас Ucoz). В WordPress его можно засунуть в шаблон футера, а в Joomla в сам шаблон перед .
И последнее, чтобы работала строка Cufon.replace(‘#newfont p’); , на сайте должен быть включен jquery . На Ucoz он есть, поэтому делать дополнительно ничего не надо. А в WordPress и Joomla, по умолчанию его нет, хотя на большинстве сайтов он используется. Чтобы убедиться в том, что он у Вас есть, посмотрите исходный код страницы. Там должна быть строчка типа
Code <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js»></script>
Необязательно в точности такая, но я думаю, понятно, что это скрипт подключает библиотеку jquery
Если у Вас такой строки нет, то добавьте ее перед .
Вот, в общем-то, и все. Надеюсь, была полезна. Жду Ваших комментариев.

По теме: