Как подключить к сайту на WordPress шрифт Google?

Здравствуй, уважаемый читатель моего блога!

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

Допустим, вы решили сменить шрифт, используемый на вашем сайте, на какой-нибудь нестандартный.

К примеру, в моем блоге используется шрифт Open Sans.

Так вот, в реализации данной задачи есть ряд тонкостей, о которых я и расскажу в данной статье.

Замену шрифта в WordPress можно осуществить простым прописыванием стилей в файле style.css, к примеру следующим образом:

1
2
3
.entry {
font-family: arial;
}

То есть в данном примере мы прописали стиль шрифта arial для текста, находящегося в контейнере:

1
<div class="entry">текст</div>

Но, если вы подключаете нестандартный шрифт (такой, как Open Sans), то по-умолчанию никаких изменений не произойдет и стиль шрифта вашего сайта или блога не станет таким, каким вы его прописали в style.css.

Что же нужно сделать? Читайте ниже…

Подключаем шрифт Google к сайту на WordPress

По сути нам нужно всего-навсего сделать так, чтобы при загрузки страниц ресурса подгружался нужный шрифт с сервиса Google Fonts.

Сделать это крайне просто, для начала заходим в сервис Google Fonts:

Как подключить к сайту на WordPress шрифт Google?

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

Как подключить к сайту на WordPress шрифт Google?

Далее нужно выбрать понравившийся шрифт и нажать на кнопку Quick-use, расположенную под ним:

Как подключить к сайту на WordPress шрифт Google?

После этого появится окно следующего вида:

Как подключить к сайту на WordPress шрифт Google?

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

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

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

Первый способ подключения выбранного шрифта к сайту или блогу доступен во вкладке Standard пункта 3 и заключается в добавлении в файл header.php шаблона WordPress перед закрывающим тегом < /head > сгенерированного кода:

Как подключить к сайту на WordPress шрифт Google?

Для реализации второго способа подключения шрифта к интернет-ресурсу переходим во вкладку @import, копируем оттуда код и вставляем его в самое начало файла стилей style.css:

Как подключить к сайту на WordPress шрифт Google?

Третий способ, как не сложно догадаться, доступен во вкладке Javascript:

Как подключить к сайту на WordPress шрифт Google?

Нужно лишь правильно подключить данный скрипт, и насколько мне известно, подобная задача имеет ряд своих тонкостей, в которых я планирую разобраться немного позже, поэтому подписывайтесь на обновления моего блога. А пока я просто добавил код перед тегом < /head > в файл header.php шаблона WordPress и у меня все заработало.

Вот таким нехитрым способом мы легко и просто подключили к интернет-ресурсу на WordPress шрифт Google.

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

Итоги конкурса комментаторов

Не буду ходить вокруг да около, победу в конкурсе, как и в прошлом месяце, одержал Иван Зелинский, о чем свидетельствует скриншот топ комментаторов моего блога по итогам месяца:

Итоги конкурса комментаторов блога expromtom.ru за ноябрь

Поздравляю с победой, Иван! Приз Ваш!

На этой позитивной ноте я заканчиваю данную статью, подписывайтесь на обновления моего блога, чтобы быть в курсе новых публикаций!

С уважением, Владимир Денисов!

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.
Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

Комментарии 4

  • Молодец Иван! Поздравляю с победой! Крепко держался!

  • Интересная вещь ❗ нужно будет и на свой блог пробнуть)

  • то-то у меня не получается ничерта) Уже второй раз в жизни пробую и нифига) Гугловские шрифты ок работают, а локальные не подключаются и хоть ты тресни)

    Не нашёл причину, но нашёл выход: локально не работает, как заливаю на сервак — всё ок. При чём локально я пробую как обращаясь через файловую систему /home/user/… в браузере, так и через веб-сервер — http://localhost/… — не работает и всё тут.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.