Три способа подключения пользовательских шрифтов на WordPress-сайт
В этой статье мы расскажем, что такое пользовательские шрифты и где найти лучшие варианты. Затем рассмотрим три способа добавления пользовательских шрифтов в WordPress.
Что такое пользовательские шрифты?
Это понятие мы будем использовать для обозначения любого шрифта, которого нет в WordPress. Для использования выбирайте те, которые соответствуют следующим критериям:
- Должны быть читабельными.
- Вписываться в общий дизайн сайта.
- Должны быть оптимизированными под мобильные устройства.
Также шрифты участвуют в формировании стиля бренда. Поэтому решение необходимо принимать максимально взвешенно.
Где найти пользовательские шрифты для WordPress-сайта
Существует множество отличных репозиториев шрифтов. Один из лучших –Google Fonts. Сервис предлагает более 900 бесплатных шрифтов на нескольких языках.
Adobe Fonts (ранее Typekit) – это еще одна отличная библиотека, которая содержит более 1700 разнообразных пользовательских шрифтов. Но для доступа к ним потребуется подписка Creative Cloud.
3 способа установить пользовательские шрифты на WordPress-сайт
WordPress позволяет установить пользовательские шрифты несколькими способами. Рассмотрим каждый способ более подробно.
1. Редактирование файла темы
Чтобы не добавлять файлы пользовательских шрифтов на сайт вручную, их можно загрузить их прямо из сторонних репозиториев. Для этого в Google Fonts откройте страницу любого шрифта и в верхней части экрана нажмите кнопку «Выбрать этот шрифт»:
После этого появится новое меню с двумя сниппетами кода. Первый выглядит следующим образом:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">Разместите приведенный выше код в теге <head> в файле header.php дочерней темы. Он находится в папке используемой темы оформления в каталоге public_html/wp-content/themes.
Этот код загрузит выбранный шрифт из Google Fonts. Но чтобы использовать его, необходимо открыть файл CSS дочерней темы и указать, какие элементы страницы должен использовать новый шрифт. Например:
font-family: 'Roboto', sans-serif;Помните, что этот CSS-файл должен находиться в том же каталоге, что и файл header.php.
2. Загрузка файла шрифта в папку темы оформления
Если вы уделяете внимание оптимизации производительности, то загрузите файлы шрифтов прямо на свой сайт. Но сначала выберите файл шрифта, который нужно загрузить на сервер.
В WordPress нет отдельной папки для шрифтов. Но ее можно создать, используя FTP-клиент. Лучше разместить ее в каталоге с темами оформления, чтобы она была на виду. Затем загрузите файл шрифта в новую папку.
После этого откройте CSS-файл дочерней темы оформления и подключите шрифт следующим образом:
@font-face {
font-family: New Font;
src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf);
font-weight: normal;
}Теперь нужно определить то, какие элементы дизайна страницы будут использовать новый шрифт. Например:
.h1 site-title {
font-family: "New Font", Arial, sans-serif;
}3. С помощью плагина
Самый простой способ реализовать новые функции в WordPress – установить соответствующий плагин. Чтобы использовать Google Fonts, мы рекомендуем установить плагин Google Fonts for WordPress.
С его помощью вы сможете выбирать шрифты для страниц и записей из каталога Google Fonts без необходимости редактирования кода.
Чтобы использовать любые файлы пользовательских шрифтов, не ограничиваясь одним репозиторием, обратите внимание на плагин Custom Fonts.
С помощью этого плагина можно загружать пользовательские шрифты на сайт непосредственно из панели администрирования WordPress.
Заключение
Среди тысяч пользовательских шрифтов стоит выбирать тот, который идеально впишется в дизайн сайта. Для его установки используйте любой из трех способов, описанных в данной статье.
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, лайки, подписки, отклики, дизлайки!