Давайте рассмотрим отличный плагин WP Google Fonts, который позволит нам без проблем поменять шрифт на своем сайте.

Скачать исходники для статьи можно ниже

Данный плагин есть на wordpress.org, вот информация о нем:

Последнее обновление: 2012-8-19.

Загрузок: 269858 раз.

Оценка 4,4 из 5 звезд, проголосовавших 72 пользователя.

Достаточно хорошие показатели.

Установка плагина стандартная – заходим в панель управления вашим сайтом на wordpress, в левом меню выбираем пункт Плагины и его подпункт Добавить новый, в строку поиска вводим WP Google Fonts.

Устанавливаем и активизируем плагин.

После данных действий в левом меню в пункте Настройки у нас появится новый подпункт Google Fonts.

К сожалению данный плагин не русифицирован.

Заходим в него и видим следующее, что настройки данного плагина состоят из 6 одинаковых блоков (Font 1 Options, Font 2 Options, Font 3 Options, Font 4 Options, Font 5 Options, Font 6 Options):

Количество блоков (6 штук), по-моему мнению предостаточно, то есть вы можете задать для сайта 6 различных шрифтов, однако, вебдизайнеры советуют задавать не более 3-х.

Каждый блок состоит из 3-х пунктов (смотри скриншот выше):

В 1 пункте – вы должны выбрать шрифт.

Здесь есть несколько нюансов:

– не все шрифты имеет кириллицу, то есть не имеют русского перевода.

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

– в данном плагине нет предпросмотра выбранного шрифта.

Все вышеуказанные нюансы можно решить, если воспользоваться сайтом:  http://www.google.com/webfonts

С данного сайта плагин WP Google Fonts и берет свои шрифты, здесь вы сможете узнать и как выглядит шрифт и найти название кириллических шрифтом, а также здесь можно найти шрифт, которого нет в данном плагине и с помощью пункта 3 блока подключить его.

Как видите шрифтов от Google на момент публикации данной статьи уже 554 (на скриншоте стрелочка 1) и их количество постоянно растет :)

Выбрать кириллические шрифты можно в пункте Script (стрелочка 2 на скриншоте), по умолчанию стоит Latin, а нужно выбрать Cyrillic.

А в основном блоке (показан стрелкой 3 на скриншоте) можно увидеть как будет выглядеть шрифт.

Плагин WP Google Fonts использует не все шрифты с сайта http://www.google.com/webfonts, поэтому если вы нашли нужный шрифт на данном сайте, то он может отсутствовать в пункте 1 данного плагина, но с помощью пункта 3  – это легко можно исправить и прикрутить данный шрифт к своему сайту.

Во 2 пункте – вы выбираете элементы, для которых хотите применить данный шрифт.

All (body tags) – для тега body, шрифт контента.
Headline 1 (h1 tags) – заголовок 1 (тег h1)
Headline 2 (h2 tags) – заголовок 2 (тег h2)
Headline 3 (h3 tags) – заголовок 3 (тег h3)
Headline 4 (h4 tags) – заголовок 4 (тег h4)
Headline 5 (h5 tags) – заголовок 5 (тег h5)
Headline 6 (h6 tags) – заголовок 6 (тег h6)
Blockquotes – Цитаты
Paragraphs (p tags) – Параграфы (тег p)
Lists (li tags) – списки

В 3 пункте – вы можете самостоятельно задать css параметры шрифта, например здесь можно прописать url шрифта, которого нет в данном плагине и др.

Давайте попробуем добавить кириллический шрифт Bad Script, которого нет в плагине WP Google Fonts.
Заходим на сайт http://www.google.com/webfonts, выбираем слева в параметре Script значение Cyrillic (стрелка 1 на скриншоте ниже) и у нас появляются 40 кириллических шрифтов, выбираем среди них Bad Script (стрелка 2 на скриншоте ниже).

Далее нам нужно нажать на ссылку Quick-use (стрелка 3 на скриншоте выше) и мы попадаем на cтраничку настройки шрифта, состоящую из 4 частей:

Первая часть – Выбор стиля.

В описании к данной части сказано – Использование нескольких стилей шрифтов может замедлить работу веб-страницы, так что выбирайте стиль шрифта, в котором вы действительно нуждаетесь на своем сайте.
Ну в данном шрифте у нас только один стиль, так что думать не приходится.

Вторая часть – выбор языка.

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

Третья часть – дается код для вставки на сайте.

Здесь нам понадобиться ссылка на шрифт. Переходим здесь на вкладку @import и копируем начиная с url(https://fonts… до конца.

Четвертая часть – здесь дается код для вставки шрифта в код CSS.

Он также нам понадобиться.

Теперь переходим в панель управления вашим сайтом в настройку плагина WP Google Fonts (в левом меню выбираем пункт “Настройки” и в нем подпункт “Google Fonts”) и переходим к 3 пункту блока.

Здесь прописываем следующий код:

font-face {
font-family: 'Bad Script', cursive;
src url(https://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic);
}

Вышеуказанным кодом мы подключили новый шрифт, указав путь до него.

Где строчку font-family: ‘Bad Script’, cursive; – мы взяли из четвертой части странички настройки шрифта, а
строчку url(https://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); – из третьей части.

Осталось только прописать здесь же, для какого тега использовать данный шрифт, давайте пропишем его для тега body, тогда окончательный код 3 пункта блока будет выглядеть следующим образом:

font-face {
font-family: 'Bad Script', cursive;
src url(https://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic);
}
body {
font-family: 'Bad Script', cursive;
}

После всех произведенных вами изменений – не забываем нажимать на кнопку Save, чтобы сохранить настройки.