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

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

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

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

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

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

Шрифты Google и шрифты Adobe Edge бесплатны. Поэтому шрифты, которые они предлагают, не являются уникальными. Некоторые шрифты для поиска услуг следующие

1. TemplateMonster — имеет множество шрифтов для личного использования по низким ценам. Также доступен один комплект для веб-разработки.
2. MyFonts — имеет самый большой выбор шрифтов в мире. Однако цены на купели действительно очень высоки.
3. fontspring-Этот сервис продает новейшие шрифты для коммерческого использования. Однако почти в каждой семье есть 1-2 бесплатных шрифта. Кроме того, есть раздел с бесплатными шрифтами.
4. Cufonfonts — еще одна большая коллекция шрифтов. Существует множество бесплатных шрифтов, разделенных на отдельные категории.
5. Dafont — это коллекция из 3 500 бесплатных шрифтов. Большинство из них предназначены только для личного пользования. Здесь вы можете выбрать мультяшные шрифты, шрифты для видеоигр, винтажные шрифты или шрифты, созданные для японских иероглифов.

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

Существует несколько способов добавления шрифтов на ваш сайт WordPress

1. Использование плагина.
2. Вручную.
3. Темы оформления: многие темы оформления WordPress включают встроенные опции для адаптации шрифтов.

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

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

Характеристика плагинов, изменяющих шрифты

Специальные добавки должны обеспечивать следующее

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

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

Адаптированные шрифты загрузчика.

Посмотрите демо-версию, чтобы узнать больше и загрузить

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

Используйте шрифт

Смотрите подробности и скачивайте

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

Google Fonts WP

Смотрите подробности и скачивайте

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

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

Посмотрите, например, на WP Google Font Add -On. Установите этот ADD -ON из официального репозитория 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

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

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

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

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

Установите свойство font-weight: bold.

Шаг 6: Чтобы подключить полужирный курсивный шрифт, добавьте следующий код

Связаны четыре стиля шрифта.

Заключение

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

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