В своей сегодняшней статье я буду рассказывать о том, как к сайту на WordPress подключить шрифт Google.
Допустим, вы решили сменить шрифт, используемый на вашем сайте, на какой-нибудь нестандартный.
К примеру, на моем сайте используется шрифт Open Sans.
Так вот, в реализации данной задачи есть ряд тонкостей, о которых я и расскажу в данной статье.
Замену шрифта в WordPress можно осуществить простым прописыванием стилей в файле style.css, к примеру следующим образом:
1 2 3 | .entry { font-family: arial; } |
То есть в данном примере мы прописали стиль шрифта arial для текста, находящегося в контейнере:
Но, если вы подключаете нестандартный шрифт (такой, как Open Sans), то по-умолчанию никаких изменений не произойдет и стиль шрифта вашего сайта не станет таким, каким вы его прописали в style.css.
Что же нужно сделать? Читайте ниже…
Подключаем шрифт Google к сайту на WordPress
По сути нам нужно всего-навсего сделать так, чтобы при загрузки страниц ресурса подгружался нужный шрифт с сервиса Google Fonts.
Сделать это крайне просто, для начала заходим в сервис Google Fonts:
Так как сайт у вас вероятнее всего на русском языке, то в появившемся окне нужно выбрать кириллические шрифты:
Далее нужно выбрать понравившийся шрифт и нажать на кнопку Quick-use, расположенную под ним:
После этого появится окно следующего вида:
В нем нужно выбрать все необходимые разновидности стилей выбранного шрифта (полужирный, курсив и т.д.), поставив галочки в соответствующие чекбоксы.
Справа в этом же окне обратите внимание на наличие своеобразного измерительного прибора, наглядно демонстрирующего уровень нагрузки на страницы вашего ресурса от подключаемого шрифта.
Советую не перегружать сайт, чтобы не сделать загрузку его страниц слишком медленной.
Осталось подключить выбранный шрифт к сайту. Для этого есть несколько способов. Рассмотрим их подробнее.
Первый способ подключения выбранного шрифта к сайту доступен во вкладке Standard пункта 3 и заключается в добавлении в файл header.php шаблона WordPress перед закрывающим тегом < /head > сгенерированного кода:
Для реализации второго способа подключения шрифта к интернет-ресурсу переходим во вкладку @import, копируем оттуда код и вставляем его в самое начало файла стилей style.css:
Третий способ, как не сложно догадаться, доступен во вкладке Javascript:
Нужно лишь правильно подключить данный скрипт, и насколько мне известно, подобная задача имеет ряд своих тонкостей, в которых я планирую разобраться немного позже.
А пока я просто добавил код перед тегом < /head > в файл header.php шаблона WordPress и у меня все заработало.
Вот таким нехитрым способом мы легко и просто подключили к интернет-ресурсу на WordPress шрифт Google.
Интересная вещь ❗ нужно будет и на свой блог пробнуть)
Попробуйте, Артём, и конечно же расскажите о результатах — что у вас получилось, и какие сложности были при этом.
то-то у меня не получается ничерта) Уже второй раз в жизни пробую и нифига) Гугловские шрифты ок работают, а локальные не подключаются и хоть ты тресни)
Не нашёл причину, но нашёл выход: локально не работает, как заливаю на сервак — всё ок. При чём локально я пробую как обращаясь через файловую систему /home/user/… в браузере, так и через веб-сервер — http://localhost/… — не работает и всё тут.