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

2023-06-22 0 ∞

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

Важность использования пользовательских шрифтов
Альтернативы Google Fonts
Как добавить пользовательские шрифты в WordPress
Вариант 1 – с помощью плагинов
Вариант 2 – установка пользовательских шрифтов вручную
Заключение

Важность использования пользовательских шрифтов

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

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

Альтернативы Google Fonts

Google Fonts и Adobe Edge Fonts бесплатны. Поэтому предоставляемые ими шрифты не уникальны. Вот еще несколько сервисов для поиска шрифтов:

TemplateMonster– здесь представлено много шрифтов для личного использования за небольшую цену. Также они доступны в ONE web development kit.
MyFonts– сервис предлагает самый большой выбор шрифтов в мире. Но их стоимость достаточно высокая.
FontSpring– сервис продает современные шрифты для коммерческого использования. Но практически в любом семействе есть 1-2 бесплатных шрифта. Кроме этого доступен раздел с бесплатными шрифтами.
Cufonfonts– еще одна обширная коллекция разнообразных шрифтов. Здесь представлено много бесплатных шрифтов, разделенных на отдельные категории.
Dafont– коллекция сервиса состоит из 3500 бесплатных шрифтов. Большинство из них предназначены только для личного использования. Здесь можно выбрать шрифты в стиле комиксов, видеоигр, винтажные или стилизованные под японские символы.

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

Есть несколько способов добавить шрифты в WordPress-сайт:

С помощью плагинов.
Вручную.
Темы оформления: многие темы оформления WordPress включают в себя встроенные параметры для настройки шрифтов.

Вариант 1 – с помощью плагинов

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

Характеристики плагинов для смены шрифтов

Специализированный плагин должен обеспечивать следующее:

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

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

Custom Font Uploader

ПОСМОТРЕТЬ ДЕМО УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

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

Use Any Font

УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

Это плагин предоставляет удобный интерфейс для загрузки шрифтов и их использования непосредственно через визуальный редактор.

WP Google Fonts

УЗНАТЬ БОЛЬШЕ И СКАЧАТЬ

Плагин позволяет использовать каталог шрифтов Google. Одним из преимуществ этого плагина является добавление около 1000 шрифтов Google.

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

В качестве примера рассмотрим плагин WP Google Fonts. Установите этот плагин из официального репозитория WordPress и откройте раздел Google Fonts.

Выберите необходимые шрифты и настройте их.

Вариант 2 – установка пользовательских шрифтов вручную

С помощью директивы @font-face можно подключить на сайте один или несколько пользовательских шрифтов. Но у этого метода есть свои преимущества и недостатки.

Преимущества:

С помощью CSS можно подключить шрифты любого формата: ttf, otf, woff, svg.
Файлы шрифтов будут располагаться на вашем сервере.

Недостатки:

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

Примечание. Перед началом работы создайте дочернюю тему оформления для своего сайта. Благодаря этому вы сможете вносить необходимые изменения в дочернюю тему, сохраняя основную.

Шаг 1. Создайте папку «fonts»

В дочерней теме оформления создайте новую папку «fonts». Она должна располагаться в каталоге wp-content/themes/your-child-theme/fonts

Шаг 2. Загрузите файлы шрифтов на сайт

Это можно сделать через панель управления хостингом или с помощью FTP. Добавьте необходимые файлы шрифтов в недавно созданную папку «fonts».

Шаг 3. Импорт шрифтов с помощью таблицы стилей дочерней темы оформления

Откройте файл style.css дочерней темы оформления и добавьте приведенный ниже код в начало файла CSS:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

MyWebFont —имя шрифта, а значение свойства src — его местоположение (относительные ссылки). Нам необходимо указать ссылку на каждый стиль отдельно. Первоначально мы устанавливаем для свойств font-weight и font-style значение normal.

Шаг 4. Для добавления курсива используйте следующий код:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Здесь мы дополнительно добавили свойство font-style: italic.

Шаг 5. Чтобы добавить жирный шрифт:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Мы устанавливаем свойство font-weight: bold.

Шаг 6. Для подключения жирного курсива добавьте приведенный ниже код:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Мы подключили четыре стиля шрифта.

Заключение

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

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