Меняем шрифт на сайте: плагин WP Google Fonts

Давайте рассмотрим отличный плагин 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  – это легко можно исправить и прикрутить данный шрифт к своему сайту.

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

Во 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, чтобы сохранить настройки.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Меняем шрифт на сайте: плагин WP Google Fonts: 2 комментария

  1. OmarSK

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

Добавить комментарий