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

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


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

В этой статье мы покажем вам, как добавлять пользовательские шрифты в WordPress с помощью методов Google Fonts, TypeKit и CSS3 @ Font-Face..

Добавление пользовательских шрифтов в WordPress

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

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

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

Шрифты раньше были дорогими, но не больше. Есть много мест, где можно найти отличные бесплатные веб-шрифты, такие как Google Fonts, Typekit, FontSquirrel и fonts.com..

Если вы не знаете, как смешивать и сочетать шрифты, попробуйте Font Pair. Это помогает дизайнерам сочетать красивые шрифты Google вместе.

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

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вы предпочитаете письменное руководство, пожалуйста, продолжайте читать.

Добавление пользовательских шрифтов в WordPress из Google Fonts

Предварительный просмотр Google Fonts

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

Способ 1: добавление пользовательских шрифтов с помощью плагина Easy Fonts

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

Первое, что вам нужно сделать, это установить и активировать плагин Easy Google Fonts. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

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

Настройщик типографии

При нажатии на типографику вы увидите различные разделы вашего сайта, где вы можете применить Google Fonts. Просто нажмите «Изменить шрифт» под разделом, который вы хотите редактировать..

Настройки типографии

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

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

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

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

Раздел управления шрифтами

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

Вы можете добавить элементы HTML, на которые хотите настроить таргетинг (например, h1, h2, p, blockquote) или использовать классы CSS.

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

Добавить CSS селекторы

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

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

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

Вариант оформления темы

Не забудьте нажать кнопку «Сохранить» или «Опубликовать», чтобы сохранить изменения..

Способ 2: вручную добавить шрифты Google в WordPress

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

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

Выберите стили шрифта, которые вы хотите использовать

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

Получить ссылку для вставки шрифта

Затем вам нужно перейти на вкладку «Внедрить» на боковой панели, чтобы скопировать код встраивания..

Вы можете добавить этот код на свой сайт WordPress двумя способами..

Во-первых, вы можете просто отредактировать файл header.php вашей темы и вставить код перед тегом.

Однако, если вы не знакомы с редактированием кода в WordPress, вы можете использовать плагин для добавления этого кода.

Просто установите и активируйте плагин Insert Headers and Footers. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

После активации перейдите к Настройки »Вставить верхние и нижние колонтитулы вставьте код для вставки в поле «Сценарии в заголовке».

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

Не забудьте нажать кнопку «Сохранить», чтобы сохранить изменения. Теперь плагин начнет загружать код встраивания Google Font на все страницы вашего сайта..

Вы можете использовать этот шрифт в таблице стилей вашей темы следующим образом:

.h1 site-title {
семейство шрифтов: «Open Sans», Arial, без засечек;
}

Более подробные инструкции см. В нашем руководстве о том, как добавить шрифты Google в темы WordPress..

Добавление пользовательских шрифтов в WordPress с помощью Typekit

Typekit Adobe Fonts

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

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

Добавить шрифт typekit в проект

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

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

Код для встраивания шрифта Typekit

Вы можете добавить этот код на свой сайт WordPress двумя способами..

Во-первых, вы можете просто отредактировать файл header.php вашей темы и вставить код перед тегом.

Однако, если вы не знакомы с редактированием кода в WordPress, вы можете использовать плагин для добавления этого кода.

Просто установите и активируйте плагин Insert Headers and Footers.

После активации перейдите к Настройки »Вставить верхние и нижние колонтитулы вставьте код для вставки в поле «Сценарии в заголовке».

Добавление Typekit от Adobe Fonts в WordPress

Вот и все, теперь вы можете использовать шрифт Typekit, который вы выбрали в таблице стилей вашей темы WordPress:

h1 .site-title {
семейство шрифтов: гилберт, без засечек;
}

Чтобы получить более подробные инструкции, ознакомьтесь с нашим руководством по добавлению классной типографии в WordPress с помощью Typekit..

Добавление пользовательских шрифтов в WordPress с использованием CSS3 @ font-face

Самый прямой способ добавления пользовательских шрифтов в WordPress – это добавление шрифтов с помощью метода CSS3 @ font-face. Этот метод позволяет вам использовать любой шрифт, который вам нравится на вашем сайте.

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

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

Лучшее место для загрузки шрифтов – это новая папка «шрифты» в вашей теме или директории дочерней темы..

Вы можете использовать FTP или File Manager вашего cPanel для загрузки шрифта.

После того, как вы загрузили шрифт, вам нужно загрузить шрифт в таблицу стилей вашей темы, используя правило CSS3 @ font-face, например:

@ font-face {
семейство шрифтов: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
Вес шрифта: нормальный;
}

Не забудьте заменить семейство шрифтов и URL своим собственным.

После этого вы можете использовать этот шрифт в любом месте таблицы стилей вашей темы, например:

.h1 site-title {
семейство шрифтов: "Арво", Arial, без засечек;
}

Загрузка шрифтов напрямую с использованием CSS3 @ font-face – не всегда лучшее решение. Если вы используете шрифт из Google Fonts или Typekit, то для оптимальной производительности лучше всего обслуживать шрифт непосредственно со своего сервера..

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me