Как добавить Google-шрифты в WordPress (вручную и с помощью плагина)
Добавление Google-шрифтов в WordPress позволяет улучшить визуальное оформление сайта и сделать его уникальным. В статье раскрываются основные способы внедрения шрифтов с помощью плагинов или кода, что подойдёт как новичкам, так и опытным пользователям.
Вы узнаете, как быстро подключить шрифты и настроить их для улучшения читаемости и дизайна. Мы также расскажем о возможных ошибках и как их избежать при добавлении шрифтов.
О Google Fonts
Google Web Fonts – это библиотека, предоставляющая пользователям интерактивный веб-каталог шрифтов, которые можно бесплатно использовать на своих сайтах.
Преимущества использования Google Fonts
- Бесплатны для использования даже в коммерческих целях.
- Готовы к использованию.
- Просты в применении.
- Google-шрифты доступны для скачивания и могут быть загружены на ваш сервер.
Как добавить Google- шрифты в WordPress вручную
Шаг 1: Найдите лучший Google-шрифт для сайта
Сначала перейдите на сайт Google Fonts и выберите шрифт, который хотите установить.
Для этого можно использовать поиск, если знаете название шрифта. А также отфильтровать шрифты по категории, языку и свойствам.
Google предоставляет функцию предварительного просмотра выбранного шрифта.
Шаг 2: Выберите и добавьте шрифт Google
Для примера я использую шрифт Montserrat. Чтобы выбрать его, нажмите на знак плюс «+».
После чего в нижней части экрана появляется панель, демонстрирующая семейства шрифтов, которые вы выбрали. По сути, она аналогична корзине для покупок.
Шаг 3: Выберите стиль и настройте шрифт
На вкладке выбранного семейства шрифтов доступно два варианта: «Встроить» (EMBED) и «Настроить» (CUSTOMIZE). Откройте настройки и задайте необходимые стили шрифта (размер, полужирный, курсивный и т.д.) и языки. Я выбрал стиль «regular 400» и «light 300 italic».
Примечание: Параметр Load Time демонстрирует скорость загрузки выбранного Google-шрифта на страницах сайта.
Шаг 4: Добавьте Google-шрифт на WordPress-сайт
Нажмите Embed, после чего вы увидите код для добавления выбранных шрифтов.
Доступно три способа добавления шрифта:
- Добавить Google-шрифт, как рекомендует WordPress.
- Встроить код Google Fonts в файл header.php.
- Добавить Google-шрифт с помощью правила @IMPORT.
Добавляем Google-шрифт так, как рекомендует WordPress
Вернитесь на вкладку «Embed» в Google Fonts и скопируйте URL-адрес (не весь скрипт) выбранного шрифта. В моем случае это https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap.
Теперь добавьте этот код в файл functions.php. Если вы работаете на локальном сервере, он будет находиться в папке используемой темы оформления. В моем случае это Disk > Xampp > htdocs > wordpress > wp-content > themes > twentynineteen.
На хостинге вам потребуется получить доступ к этому файлу с помощью любого FTP-клиента. В моем случае, это Applications> MyDB> public_html> wp-content> themes> twentynineteen
Теперь откройте файл functions.php и добавьте в него приведенный ниже код:
function wpblog_add_google_fonts() {
wp_enqueue_style( 'wpblog_google_fonts', 'https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'wpblog_add_google_fonts' );Примечание: не забудьте изменить URL-адрес на свой.
Теперь сохраните отредактированный файл.
Встраивание кода Google Fonts в файл header.php
Этот метод позволяет добавить Google-шрифт, скопировав код из вкладки «Embed» и добавив его в файл header.php используемой темы оформления. Этот файл расположен в следующей папке: Disk> Xampp> htdocs> wordpress> wp-content> themes> twentynineteen.
Откройте header.php и добавьте в него приведенный ниже код:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://WPblog.com/wp-content/themes/WPblog/style.css" media="all">Примечание: добавьте этот код в раздел <head>.
Нажмите кнопку «Сохранить», и все будет готово!
Импорт Google-шрифта
Самый простой способ добавить Google-шрифт в WordPress – загрузить его в CSS. Для этого достаточно нажать на @IMPORT.
А затем скопировать код без <style> и добавить его в начало файла CSS используемой темы оформления WordPress. Но имейте в виду, что такой способ может увеличить время загрузки страниц.
Добавление Google-шрифтов в WordPress с помощью плагина
Существует несколько специализированных плагинов для добавления шрифтов. Но в этом руководстве я буду использовать плагин Easy Google Font.
Шаг 1: Установите плагин Easy Google Fonts
В панели администрирования WordPress перейдите в раздел Плагины > Добавить новый и в поле поиска введите «Easy Google Fonts». Затем установите и активируйте данный плагин.
Шаг 2: Использование различных Google-шрифтов
После установки плагина вы увидите новую вкладку Typography. Чтобы проверить шрифты, перейдите в меню Внешний вид> Настроить.
Изначально на сайте доступны настройки шрифтов по умолчанию. То есть шрифты активной темы оформления. Но теперь вы можете управлять шрифтами.
Например, выберите меню Paragraphs, и вы увидите различные параметры стиля для абзацев (на вкладке стилей).
Вы также сможете изменить внешний вид абзаца: цвет, фон, размер шрифта и многое другое.
А также настройки позиционирования.
Когда закончите, сохраните внесенные изменения.
Лучшие Google-шрифты для WordPress
Я выбрал семь лучших Google-шрифтов для WordPress:
1. Roboto
Один из наиболее популярных и широко используемых шрифтов для Android и веб-приложений.
2. Lora
Популярное семейство шрифтов из-за высокой читабельности и большого количества доступных вариантов.
3. Montserrat
Этот шрифт вобрал в себя всю красоту урбанистической типографии.
4. Lato
Широко используемый шрифт.
5. Open sans
Приятный шрифт без засечек, который легко читается.
6. PT Serif
Семейство шрифтов, которое часто используются для веб-страниц и печатных документов.
7. Rubik
Семейство шрифтов, которое обрело популярность благодаря своему чистому и ясному внешнему виду.
Заключение
Есть несколько способов добавления Google-шрифтов в WordPress. Это можно сделать вручную или воспользоваться специальным плагином.
Комментарии