Как изменить шрифты в WordPress [простой способ]

Хотите изменить шрифт, используемый на вашем сайте WordPress?

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

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

Лучший способ изменить шрифт на вашем сайте – использовать плагин Easy Google Fonts.

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

Обновление: мой новый видеоурок проведет вас по шагам (в нем используется другой плагин, чем в этом руководстве).

Подпишитесь на Compete Themes на Youtube

Что такое шрифты Google?

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

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

Понятно? Отлично, давайте добавим эти шрифты!

Создайте свой элемент управления шрифтом

Когда вы активируете плагин, вы найдете новый пункт меню Google Fonts, добавленный в Настройки. На этой странице вы найдете следующие варианты:

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

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

Под именем элемента управления есть поле, в котором вы можете определить селекторы CSS, которые хотите использовать. Если вы не знаете, что такое селектор CSS, это не проблема.

По умолчанию добавлены три селектора CSS. Щелкните значок «x» на каждом из них, чтобы удалить их. После удаления введите звездочку (*) и нажмите ввод. Настройка CSS-селекторов теперь должна выглядеть так:

Звездочка – это селектор CSS, который нацелен на каждый элемент HTML на сайте. Другими словами, вы только что сказали Easy Google Fonts использовать ваш новый шрифт для всего текста на сайте.

Принудительное переопределение стилей

Я также рекомендую установить флажок «Принудительное переопределение стилей». Это гарантирует, что выбранный вами шрифт переопределит шрифты, используемые в теме. У использования этой опции нет недостатков, поэтому вы можете также проверить ее, сэкономив минуту, если шрифты не переопределяются без нее.

Выбери свой новый шрифт

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

Посетите настройщик, чтобы начать выбор шрифта (Внешний вид> Настроить). Оказавшись там, нажмите на новый раздел «Типографика».

EGF отлично работает с темой Period.

В этом разделе появятся два новых подраздела: Типографика по умолчанию и Типографика темы. Щелкните раздел «Типографика темы».

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

Вариантов довольно много, но редактировать нужно только два.

Изменить сценарий / подмножество

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

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

Выберите семейство шрифтов

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

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

Я рекомендую вам посетить Google Fonts, который хорошо разработан для просмотра и поиска шрифтов. Как только вы найдете несколько понравившихся шрифтов, вернитесь на свой сайт и попробуйте их с помощью Easy Google Fonts.

Добавление и настройка дополнительных шрифтов

Надеюсь, вам понравился ваш новый шрифт, но вы можете сделать гораздо больше с помощью Easy Google Fonts.

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

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