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

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

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

• Где найти пользовательские шрифты
• Как добавить Google Fonts на свой сайт с помощью плагина Easy Google Fonts
• Добавление Google Fonts на ваш сайт вручную (плагин не требуется)
• Добавление шрифтов Adobe в WordPress
• Как добавить любой пользовательский шрифт в ваше веб-пространство

Готовы начать?

Где можно найти пользовательские шрифты?

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

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

• Google Fonts. Самый популярный выбор, Google Fonts, предлагает бесплатный каталог из более чем 900 дизайнерских шрифтов с открытым исходным кодом, которые можно использовать на более чем 135 языках. Эти шрифты можно быстро просмотреть, а затем легко интегрировать в любой проект веб-дизайна.
• Adobe Fonts (ранее известный как Typekit). Хотя Typekit предлагал как бесплатную, так и премиальную версии своего сервиса, теперь переименованного в Adobe Fonts, для доступа к этому ресурсу вам необходимо подписаться на платный пакет Adobe Creative Cloud. Есть тысячи шрифтов на выбор, все шрифты лицензированы для личного и коммерческого использования, и вы также можете выбрать из тематических пакетов шрифтов, которые идеально подходят для тех, кто не разбирается в дизайне.
• Font Squirrel — в библиотеке Font Squirrel вы найдете как бесплатные, так и премиальные шрифты, причем последний можно купить в качестве разовой покупки. Опять же, вы можете выбирать из тысяч высококачественных шрифтов, большинство из которых бесплатны и имеют коммерческую лицензию.
• Fonts.com. Предлагая более 150 000 продуктов для настольных компьютеров и веб-шрифтов, Fonts.com содержит впечатляющую коллекцию пользовательских шрифтов премиум-класса. Вы также найдете множество интересных статей в блоге Font.com, в которых делятся советами и приемами типографики.
• FontPair — Предлагая несколько иной опыт, чем другие ресурсы, FontPair объединяет шрифты из Google Fonts, помогая вам найти правильные комбинации шрифтов для вашего веб-сайта.

Итак, теперь вы знаете, где найти пользовательские шрифты. Давайте теперь посмотрим, как добавить Google Fonts на ваш сайт WordPress.

Как добавить шрифты Google в WordPress с помощью плагина Easy Google Fonts

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

Easy Google Fonts — это бесплатный плагин WordPress, который позволит вам вставлять пользовательские шрифты на ваш веб-сайт WordPress без необходимости касаться строки кода. Благодаря интеграции с настройщиком WordPress этот плагин позволит вам вставлять и использовать шрифты Google в интерфейсе вашего веб-сайта в режиме реального времени без необходимости обновлять страницу.

Итак, давайте теперь узнаем, как установить и использовать этот плагин.

Шаг 1. Установите Easy Google Fonts

Чтобы начать работу с Easy Google Fonts, откройте панель управления WordPress и выберите в меню « Плагины» > «Добавить новый» .

Затем введите Easy Google Fonts в функцию поиска и, как только плагин будет получен, нажмите « Установить» > «Активировать» .

Теперь вы найдете Easy Google Fonts в разделе « Настройки » в меню WordPress.

Шаг 2. Отредактируйте шрифты в настройщике WordPress.

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

Щелкните Типографика. Затем вы можете выбрать различные области вашего веб-сайта, где вы хотели бы применить собственный шрифт Google (например, абзац, заголовок 2, заголовок 3 и т. д.).

Под разделом, который вы хотите изменить, нажмите « Редактировать шрифт » . Затем вы можете выбрать шрифт, который хотите использовать — вы сможете предварительно просмотреть, как каждый шрифт выглядит прямо на вашем веб-сайте.

Вы можете изменить не только тип шрифта, но и цвет, размер, положение и многое другое. Если вы довольны новым шрифтом, нажмите «Опубликовать ».

Шаг 3: Создайте пользовательские элементы управления шрифтом

Элементы управления Easy Google Fonts по умолчанию позволят вам изменить шрифты разделов абзаца и заголовков 1–6. Однако не всеми элементами вашей темы можно управлять с помощью элементов управления шрифтами по умолчанию.

Если вы хотите изменить другой элемент вашей темы (кроме абзаца или заголовка), вам нужно будет создать свои собственные элементы управления шрифтом. Хотя Easy Font Control позволяет вам легко это сделать, вам все равно потребуется базовое понимание селекторов CSS.

Чтобы добавить настраиваемые элементы управления шрифтами, выберите « Настройки» > «Шрифты Google» на панели управления WordPress. Затем на вкладке « Редактировать элементы управления шрифтом» дайте новой группе управления шрифтом соответствующее имя и выберите « Создать элемент управления шрифтом». Здесь мы создадим элемент управления шрифтом для цитат…

В разделе « Добавить селекторы CSS » добавьте селектор CSS для элемента, которым вы хотите управлять. Вы можете добавить более одного элемента, если хотите. Затем выберите Сохранить управление шрифтом .

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

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

Easy Custom Fonts — отличный вариант для тех, кто хочет добавить пользовательские шрифты в WordPress из Google. Однако, если вы предпочитаете, вы также можете вручную добавить Google Fonts на свой веб-сайт, используя только код, без плагина. Давайте узнаем, как это сделать…

Как вручную добавить шрифты Google в WordPress (плагин не требуется)

Если вы предпочитаете добавлять Google Fonts в WordPress вручную, вам потребуются базовые знания в области кодирования.

Шаг 1. Выберите шрифт Google.

Для начала откройте Google Fonts и выберите пользовательский тип шрифта, который вы хотите добавить на свой веб-сайт.

Затем на странице шрифта нажмите « Выбрать этот шрифт ». Здесь мы выбрали шрифт Indie Flower.

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

Шаг 2. Вставьте код пользовательского шрифта на свой веб-сайт WordPress.

Затем вам нужно будет скопировать код для вставки (см. всплывающее окно выше) и вставить его в раздел <head> вашей темы WordPress. Самый простой способ сделать это — установить бесплатный плагин WordPress Insert Headers and Footers. С помощью этого плагина вы можете быстро добавить код на свой сайт без необходимости редактирования файлов темы.

После установки откройте настройки плагина, выбрав « Настройки» > «Вставить верхний и нижний колонтитулы » на панели управления WordPress. Затем вам нужно добавить код для встраивания Google Fonts в раздел «Заголовок».

Точно так же, если вы предпочитаете, вы можете отредактировать файл header.php вашей дочерней темы.

Шаг 3: Примените новый шрифт с помощью CSS

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

Вернувшись в настройщик на активной стороне вашего веб-сайта, выберите «Дополнительный CSS». Здесь вы можете ввести код CSS для настройки шрифтов на вашем сайте. Ниже вы можете видеть, что мы применили CSS-код Indie Flower к разделам заголовка 2 и абзаца…

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

Как добавить шрифты Adobe в WordPress

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

Шаг 1: выберите шрифт Adobe

Прежде всего, вам нужно будет просмотреть обширную библиотеку шрифтов Adobe и выбрать шрифт(ы), которые подходят для вашего проекта. Сделав выбор, щелкните значок </> , чтобы добавить шрифт в новый веб-проект .

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

Шаг 2. Вставьте код Adobe Font на свой веб-сайт WordPress.

Следующим шагом будет встраивание кода, который Adobe предоставляет для выбранного вами шрифта, в ваш веб-сайт WordPress.

Это точно такой же процесс, как встраивание кода Google Fonts. Просто вставьте код в тег <head> на своем веб-сайте или используйте плагин WordPress для вставки верхних и нижних колонтитулов (как обсуждалось ранее).

Шаг 3: Примените новый шрифт с помощью CSS

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

Вернувшись на свой веб-сайт WordPress, эти правила CSS можно использовать в настройщике в разделе « Дополнительные CSS».

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

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

Как добавить собственный шрифт в ваше веб-пространство

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

Шаг 1. Загрузите пользовательский шрифт

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

Здесь мы загрузили бесплатный пользовательский шрифт Milkshake от Squirrel Fonts.

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

Если вам нужно преобразовать ваш пользовательский шрифт в другой формат, Squirrel Font предоставляет бесплатный инструмент Webfont Generator, который позволит вам это сделать.

Шаг 2: Загрузите пользовательский шрифт на свой сервер

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

Затем в папке с активной темой создайте новую папку с именем « Шрифты » и загрузите сюда свой собственный шрифт.

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

Шаг 3: Используйте CSS для применения пользовательского шрифта к вашему веб-сайту

Теперь вам нужно применить пользовательский шрифт к вашему веб-сайту. Для начала вам нужно загрузить шрифт в таблицу стилей вашей темы. Для этого откройте настройщик WordPress и в разделе «Дополнительные CSS» добавьте этот код:

 @шрифт-лицо {
    семейство шрифтов: Milkshake;
    источник: URL ("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         формат("вафф");
}

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

Затем вы можете продолжить и использовать правила CSS для обновления шрифтов на вашем сайте. Вот пример того, как применить пользовательский шрифт к разделам заголовка 3 и абзаца:

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

Заключительные мысли о том, как добавить пользовательские шрифты в WordPress

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

У вас есть вопросы о том, как добавить пользовательские шрифты в WordPress? Пожалуйста, спросите в комментариях ниже…