Как добавить шрифт на сайт WordPress

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

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

Зачем добавлять свой шрифт на сайт WordPress

1. Фирменный стиль и уникальность бренда

Шрифт — это не просто буквы. Он передаёт настроение и характер проекта. У крупного бренда всегда есть свой фирменный шрифт, который используется в логотипе, презентациях и на сайте. Если на сайте стоят стандартные шрифты, он будет выглядеть «как все». А вот собственный шрифт сразу добавляет индивидуальности и помогает выделиться среди конкурентов.

2. Читаемость и удобство для пользователя

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

Выбирая правильный шрифт и устанавливая его на сайт, вы делаете контент удобным для восприятия. А это значит, что пользователи будут дольше оставаться на страницах и охотнее возвращаться.

3. Шрифты с лицензией и кастомные решения

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

⚠️ О лицензии шрифтов

Прежде чем подключать любой шрифт на сайт — обязательно проверьте его лицензию. Даже если вы просто нашли красивый файл .ttf в интернете, это не значит, что его можно свободно использовать.

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

Способы добавления шрифтов в WordPress

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

1. Добавление шрифта вручную через файл темы

Это способ для тех, кто не боится немного покопаться в файлах темы. Вот пошагово, как это сделать:

Шаг 1.

Подготовьте файлы шрифта

Убедитесь, что у вас есть шрифт в нужных форматах: .woff, .woff2, а при необходимости .ttf или .eot. Самые универсальные — .woff и .woff2.

Шаг 2.

Загрузите файлы в тему

Через FTP или файловый менеджер в панели хостинга перейдите в папку своей темы:
/wp-content/themes/ваша_тема/fonts/
Если папки fonts нет — создайте её и загрузите туда файлы шрифта.

Шаг 3.

Измените CSS

Откройте файл style.css. Добавь следующий код:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/myfont.woff2') format('woff2'),
         url('fonts/myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Теперь можно использовать шрифт в стилях:

body {
    font-family: 'MyCustomFont', sans-serif;
}

Важно: при обновлении темы изменения могут исчезнуть. Лучше использовать дочернюю тему!

2. Добавление шрифта через плагин: Use Any Font

Use Any Font — один из самых популярных и удобных плагинов для WordPress, который позволяет добавлять на сайт любые шрифты без необходимости редактировать файлы темы вручную. Плагин поддерживает форматы .ttf, .otf, .woff и .woff2 и автоматически делает шрифты доступными для всех элементов сайта: заголовков, текста, меню, виджетов и блоков контента.

Преимущества плагина

• Не требует знаний CSS или PHP. Всё делается через удобный интерфейс в админке WordPress.
• Поддерживает любые форматы шрифтов. Это значит, что можно загружать как платные, так и бесплатные шрифты.
• Совместим с большинством тем и конструкторов. Работает с Elementor, Divi, WPBakery и другими.
• Быстрое подключение. После загрузки шрифт сразу доступен для применения ко всему сайту.

Установите и активируйте плагин в админке сайта. После активации можно перейти к настройке.

В левом меню админки откройте раздел Use Any Font. Плагин попросит API-ключ, который можно сгенерировать прямо на странице настроек. Нажмите кнопку Generate Free API Key. Подтвердите полученный ключ кнопкой Verify. Можно приступать к загрузке шрифтов.

Подготовьте файлы шрифтов, которые необходимо загрузить на сайт. Перейдите в раздел Upload Font и нажмите кнопку Upload Fonts.

Укажите название шрифта и выберите файл. Нажмите Upload.

Когда шрифт загрузится на сайт он появится в списке загруженных шрифтов.

Следующий шаг — применить шрифт для элементов сайта. Делается это в разделе Assign Font.

Перейдите в раздел и нажмите кнопку Assign Font. Откроются настройки

В выпадающем списке выберите загруженный шрифт, а ниже укажите, к каким элементам будет применен новый шрифт. Это могут быть: заголовки h1-h6, названия страниц, записей или же все содержимое сайта (тег body). Нажмите кнопку Assign Font, чтобы сохранить изменения.

Теперь можно зайти на сайт и посмотреть изменения.

3. Добавление шрифта через Google Fonts (вручную)

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

1. Найдите шрифт на Google Fonts
   Перейдите на https://fonts.google.com, выберите нужный шрифт и нажмите кнопку Get font. Справа появится кнопка Get embed code.
2. Подключите шрифт на сайт

Скопируйте код и вставьте его в файл header.php внутри тега <head></head>.

<head>
  <meta charset="UTF-8">
  <title><?php bloginfo('name'); ?></title>
  ...
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>

3. Используйте новый шрифт на сайте
   Теперь можно использовать новый шрифт в css стилях сайта. Откройте style.css измените для body шрифт

body {
    font-family: 'Roboto', sans-serif;
}

• Готово!

Заключение

Мы рассмотрели три основных способа добавления шрифтов в WordPress — вручную через файлы темы, с помощью Google Fonts и через плагин Use Any Font. Каждый вариант подходит под разные уровни подготовки и разные задачи:

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