Как добавить Google Web Fonts в WordPress Themes «правильным» способом

Google-шрифты – замечательный бесплатный ресурс для веб-дизайнеров. В WPBv4 мы начали использовать популярную комбинацию Google Font: Освальд и Лора. Некоторые из наших пользователей спрашивают нас, как добавить веб-шрифты Google в темы WordPress. Если вы помните, мы показали, как добавить шрифты Google в WordPress Post Editor. В этой статье мы покажем вам, как добавить веб-шрифты Google в ваши темы WordPress. Правильно, оптимизирован для производительности.


Найдите понравившиеся вам веб-шрифты Google

Первое, что вам нужно сделать, это найти шрифт Google, который вам нравится. Зайдите на Google шрифты и просмотрите библиотеку. Когда вы найдете шрифт, который вам нравится, нажмите на «Быстрое применение» кнопка.

Быстрое использование шрифтов от Google Fonts

Как только вы нажмете кнопку быстрого использования, вы попадете на новую страницу. Прокрутите вниз, пока не увидите окно инструкции по использованию с кодом, который вы можете добавить на свой сайт.

Код для вставки шрифта Google

Вы увидите, что есть три разных вкладки для добавления шрифта на ваш сайт. Первый – это стандартный и рекомендуемый способ добавления шрифтов Google на ваш сайт. Вторая вкладка использует метод @import CSS, а последняя вкладка использует метод JavaScript.

Мы покажем вам, как использовать каждый из этих методов и каковы плюсы и минусы.

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте чтение.

Добавление веб-шрифтов Google в темах WordPress

Мы в основном видели людей, использующих первые два метода.

Самый простой способ – открыть тему style.css файл и вставьте код шрифта, который вы получили на вкладке @import, например:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Вы также можете объединить несколько запросов шрифтов в один. Вот как бы вы это сделали:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Этот метод очень прост, но это не лучший способ добавить шрифты Google на ваш сайт WordPress. Использование метода @import блокирует параллельные загрузки, что означает, что браузер будет ожидать завершения загрузки импортированного файла, прежде чем начнет загружать остальную часть содержимого..

Если вы ДОЛЖНЫ использовать @import, то хотя бы объедините несколько запросов в один.

Оптимизированный по производительности метод добавления веб-шрифтов Google

Лучший способ добавить шрифты Google – использовать стандартный метод, который использует метод ссылки вместо метода импорта. Просто возьмите URL-адрес шрифта, полученный на шаге 1. Если вы добавляете несколько шрифтов, вы можете объединить два шрифта с | персонаж. Затем поместите код в заголовок вашей темы.

Скорее всего, вам придется отредактировать файл header.php и вставить следующий код над основной таблицей стилей. Пример будет выглядеть так:

В основном цель состоит в том, чтобы поместить запрос шрифта как можно раньше. Согласно блогу Google Web Fonts, если перед объявлением @ font-face есть тег сценария, то Internet Explorer не будет ничего отображать на странице, пока файл шрифта не будет загружен..

Как только вы это сделаете, вы можете просто начать использовать его в файле CSS вашей темы, например так:

h1 {
семейство шрифтов: «Освальд», Helvetica, Arial, Serif;
}

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

Правильно ставить в очередь шрифты Google в WordPress

Еще один способ добавить Google-шрифты на ваш сайт WordPress – поставить в очередь шрифт в файле functions.php вашей темы или в плагине для сайта..

function wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

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

Загрузка Google шрифтов с помощью JavaScript

Для этого метода вам необходимо скопировать код на вкладке JavaScript в разделе инструкций по использованию шрифтов Google. Вы можете вставить этот код в свою тему или файл header.php дочерней темы сразу после тега.

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me