Я около года или больше назад писал в своем блоге о использовании оригинальных шрифтов на WordPress с помощью плагина WP Cufon, даже перевел его и выложил для скачивания.

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

Подробно рассказывать о использовании скрипта Cufon с помощью плагина WP Cufon не буду. Если интересно — можете прочесть здесь.

Сегодня я хочу показать, как можно внедрить скрипт cufon в тему шаблона WordPress и использовать оригинальный шрифт без плагина WP-Cufon.

Наверняка, вы уже читали о том, что чем меньше сторонних плагинов — тем лучше, тем быстрее работает ваш сайт, потому что внешнее подключение стороннего кода всегда чуть «тормозит» работу сайта, а все плагины — это и есть внешне подключаемый код PHP. Есть даже жесткие правила и требования к ускорению сайта через объединение общего кода в одинаковых файлах: например, того же стиля в файлах CSS — в один файл, скриптов JS — в один файл, и так далее.

Итак, что нам, а точнее, вам понадобится для внедрения кода Cufon?

Сначала нужен сам скрипт JS.

Его можно скачать на сайте разработчиков, а можно — у меня по ссылке ниже:

Напишите свое имя и Email для получения ссылки на скачивание.

Получить ссылку для скачивания

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

• Calibri
• Compact
• Arabic
• Burlak
• Monotype Corsiva
• Myriad Pro
• Palatino Linotype

Все шрифты — кириллические, чистые, можете смело их качать:

Напишите свое имя и Email для получения ссылки на скачивание.

Получить ссылку для скачивания

Чтобы у вас заработали скрипты в шаблоне — советую сделать следующие действия:

1. Создайте папку в шаблоне и назовите ее /js
2. Загрузите в эту папку два файла: cufon-yui.js и любой на ваш выбор скрипт шрифта, например — Burlak_400.font.js.
3. Откройте файл header.php и где-нибудь внутри тега HEAD, до его закрытия /HEAD впишите такие строки:

<script src=»<?php bloginfo(‘template_directory’); ?>/includes/js/cufon-yui.js» type=»text/javascript»></script>
<script src=»<?php bloginfo(‘stylesheet_directory’); ?>/fonts/Burlak_400.font.js» type=»text/javascript»></script>

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

Например, вы хотите заменить все теги H2 (это обычно заголовки записей) на оригинальный. Отлично! В том же файле header.php, чуть ниже строк, которые вы уже добавили, ДО закрытия тега </head>, вставьте следующий скрипт:

<script type=»text/javascript»>
Cufon.replace(‘h2’, {hover: true});
</script>

Параметр replace дает команду скрипту выполнить замену шрифта там, где есть теги h2, обязательно учитывая функцию наведения курсора на заголовок H2 (hover:true).

Теперь сохраните файл (не забывайте, что файлы PHP нужно редактировать правильным редактором!). Перегрузите сайт и посмотрите, работает  оригинальный шрифт или нет. Должен работать, отвечаю сразу на вопросы в комментариях :).

Еще примеры использования скрипта который указывает на замену тех или иных свойств начертания шрифтов на сайте. Много других примеров ищите в Сети:

Cufon.set(‘fontFamily’, ‘NiftyFont’);

Cufon.replace(‘#welcome’);
Cufon.replace(‘#sidebar h2’);
Cufon.replace(‘#content .title’);

Cufon.set(‘fontFamily’, ‘AnotherNiceFont’);
Cufon.replace(‘h4’);
Cufon.replace(‘.quote’);
Cufon.replace(‘#message’);

Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)
Cufon.replace(‘#your_div_id &amp;gt; h1:first-child’, { fontFamily: ‘FontName With Spaces’ });
Cufon.replace(‘#your_div_id a’, { fontFamily: ‘FontName’ });
Cufon.replace(‘#your_div_id’, { fontFamily: ‘FontName-Medium’ });

Other Examples:
Cufon.set(‘fontFamily’, ‘Vegur’);
Cufon.replace(‘#blog-title a’, { hover: true });
Cufon.replace(‘.menu a’, { hover: true, fontWeight: ‘800’ });
Cufon.replace(‘.aside h3’);
Cufon.replace(‘h1.page-title’ , { fontWeight: ‘400’ });
Cufon.replace(‘h1.entry-title’, { fontWeight: ‘400’ });
Cufon.replace(‘h2.entry-title’, { fontWeight: ‘400’, hover: true });

Все эти варианты — с учетом ваших свойств в файле стилей style.css.

Надеюсь, моя шпаргалка кому-нибудь поможет.

Ваши отзывы и комментарии — чуть ниже, пожалуйста

https://unicodsgn.com — разработка интернет-сайтов. Хотите заказать себе уникальный сайт у профессиональной студии? Тогда вам сюда. Здесь действительно работает мастера своего дела. Согласитесь, ведь каждый должен заниматься тем, что он лучше умеет.