Как добавить веб-шрифты Google в темы WordPress правильным способом

Шрифты Google - удивительный бесплатный ресурс для веб-дизайнеров. В WPBv4 мы начали использовать популярную комбинацию шрифтов Google: Oswald и Lora....

Шрифты Google — удивительный бесплатный ресурс для веб-дизайнеров. В WPBv4 мы начали использовать популярную комбинацию шрифтов Google: Oswald и Lora. Некоторые из наших пользователей спрашивали, как добавить веб-шрифты Google в темы WordPress. Если вы помните, мы показывали, как добавить шрифты Google в WordPress Post Editor. В этой статье мы покажем вам, как добавить Google Web Fonts в ваши темы WordPress ПРАВИЛЬНЫЙ способ, оптимизированный для производительности.

Найдите Google Web Fonts, которые вам нравятся

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

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

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

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

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

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

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

Самым простым способом будет открыть файл вашей темы стиль.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 Web Fonts

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

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

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

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

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

Правильное включение Google Fonts в WordPress

Другой способ добавить шрифты Google на ваш сайт WordPress — это задействовать шрифт в функциях вашей темы.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. Вы можете вставить этот код в шапку вашей темы или дочерней темы.php файл сразу после тега.

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий