Как добавить пользовательские шрифты в WordPress?

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

Итак, необходимо знать, как добавлять пользовательские шрифты в WordPress. Правильный выбор шрифта придает веб-сайту особый вид, позволяет создать визуальный бренд, повышает читабельность и вовлеченность посетителей.

В Интернете доступны тысячи шрифтов, многие из них бесплатны. В этой статье речь пойдет о добавлении шрифтов из двух самых популярных баз данных веб-шрифтов на ваш сайт — Google Fonts и Adobe Fonts, также известных как Typekit Fonts. Эти библиотеки шрифтов включают тысячи веб-шрифтов, которые вы можете загрузить.

Наряду с этими в Интернете есть бесчисленное множество других библиотек шрифтов, и мы поговорим о них тоже.

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

Как добавить пользовательские шрифты в WordPress

1. Добавьте шрифты Google с помощью плагина

Если вы планируете использовать Google Fonts для стилизации контента вашего веб-сайта WordPress, то есть удобный инструмент, который напрямую связывает ваш WordPress Customizer с базой данных Google Fonts. Easy Google Fonts бесплатен и позволяет вам использовать Google Fonts без необходимости работать с каким-либо кодом.

1. Для этого метода сначала установите плагин Easy Google Fonts. После того, как плагин настроен, вы найдете новую опцию под названием «Типография» в вашем настройщике WordPress (Внешний вид > Настроить).

2. Как только вы перейдете к опции «Типографика», вы найдете различные разделы содержимого по умолчанию или элементы управления шрифтом, которые вы можете настроить. Вы можете найти настройки шрифта для этой конкретной группы, нажав «Редактировать шрифт».

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

На вкладке «Внешний вид» вы можете найти другие распространенные параметры, такие как «Цвет шрифта», «Размер шрифта» и «Высота строки».

На вкладке «Позиционирование» есть некоторые подробные визуальные элементы управления, такие как «Поля», «Отступы» и «Граница».

3. Теперь вашему веб-сайту также может потребоваться особое внимание к определенным категориям текста, которые могут не учитываться элементами управления шрифтом по умолчанию, предоставляемыми этим плагином. Возможно, вам просто нужны одинаковые настройки типографики для всех ваших заголовков и вы хотите, чтобы одна категория контролировала их все. Вы можете создать собственные элементы управления шрифтом, выбрав «Настройки» > «Шрифты Google».

4. Перейдите на вкладку «Управление элементами управления шрифтом» и нажмите «Создать элемент управления шрифтом».

5. Вам будет предложено предоставить селекторы CSS для определения этой конкретной категории. Затем нажмите «Безопасное управление шрифтом», чтобы создать новую категорию/элемент управления шрифтом.

6. Пользовательские элементы управления шрифтом можно найти в другом месте, чем элементы управления по умолчанию. Вернитесь в настройщик WordPress и нажмите на опцию «Типографика». Вы обнаружите, что есть две категории — типографика по умолчанию и типографика темы. Пользовательские элементы управления шрифтом можно найти в разделе «Типографика темы».

2. Добавьте шрифты Google с помощью кода

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

2. Перейдите на сайт Google Fonts и найдите понравившийся шрифт. Вы найдете различные стили каждого шрифта на странице шрифта. Нажмите кнопку «Выбрать этот стиль» для нужного стиля. Выбранный вами шрифт будет сохранен для использования в специальном разделе. В правом верхнем углу страницы есть кнопка для просмотра выбранных вами шрифтов. Он открывает боковую панель с двумя вкладками. Нажмите на вкладку «Вставить».

3. Скопируйте эту ссылку для встраивания и вставьте ее в файл header.php прямо перед тегом <body>.

4. Если вы не хотите возиться с трудностями при работе с файлами тем, есть удобный плагин Insert Headers and Footers, который легко добавляет код в ваши файлы тем. Вы можете использовать этот плагин через его собственный раздел на панели настроек под названием «Вставить верхние и нижние колонтитулы». Просто вставьте код в поле «Сценарии в заголовке».

3. Добавьте шрифты Adobe TypeKit в WordPress

У Adobe есть еще одна впечатляющая библиотека пользовательских шрифтов с бесплатной и платной версиями. Прежде чем вы начнете использовать их шрифты, вам потребуется учетная запись на веб-сайте Adobe Fonts. Вы можете начать просмотр доступных шрифтов со страницы « Обзор шрифтов ».

1. После входа на веб-сайт вы можете использовать понравившиеся шрифты, нажав кнопку </>.

2. Чтобы получить ссылку для встраивания, вам необходимо создать веб-проект на Adobe Fonts и добавить в проект выбранный шрифт.

3. Как и в случае с Google Fonts, вы должны вставить эту ссылку для встраивания в файл header.php вашей темы перед тегом <body>.

4. Вы можете избежать работы напрямую с файлами темы, используя плагин Insert Headers and Footers. Просто перейдите к параметру «Вставить верхние и нижние колонтитулы» на панели настроек и вставьте код для встраивания в поле «Сценарии в верхнем колонтитуле». Это позволит импортировать выбранные вами шрифты TypeKit.

Некоторые другие библиотеки пользовательских шрифтов

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

1. Шаблонмонстр
2. Шрифт Белка
3. Фонтспринг
4. 1001 бесплатных шрифтов
5. Шрифтовый урод
6. Абстрактные шрифты
7. Мои шрифты

Как добавить другие пользовательские шрифты с помощью плагина

Существует удобный плагин под названием «Использовать любой шрифт», который позволяет избежать проблем с добавлением пользовательских шрифтов вручную. Он предоставляет вам простой интерфейс, с помощью которого вы можете добавлять новые шрифты прямо с панели инструментов и назначать свои собственные шрифты нужным элементам.

Как добавить другие пользовательские шрифты вручную

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

Загрузите нужный шрифт из любой библиотеки шрифтов, например TemplateMonster. Затем перейдите в wp-content/themes/your-theme/fonts и загрузите его в папку Fonts с помощью FTP-клиента. Если папки Fonts нет, создайте ее.

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

@шрифт-лицо {

семейство шрифтов: пользовательский шрифт;

источник: URL-адрес (http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

вес шрифта: нормальный;

}

Вам нужно заменить семейство шрифтов на имя шрифта, который вы хотите импортировать, и URL-адрес на URL-адрес вашего веб-сайта.

Вывод

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