Как подключить к сайту на Вордпресс шрифт Гугл

В своей сегодняшней статье я буду рассказывать о том, как к сайту на 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.

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

Как сделать красивую форму подписки Feedburner для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

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

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

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

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

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

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

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