Как изменить шрифты в WordPress

Отличный способ добавить бренду и индивидуальности вашему сайту WordPress — это изменить шрифты в вашей теме.

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

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

Как изменить шрифты в WordPress

Вы можете изменить шрифты в WordPress тремя основными способами:

1. Как изменить шрифты в WordPress с помощью веб-шрифтов

Использование веб-шрифтов — более простой и быстрый способ изменить шрифты в WordPress, чем загрузка и загрузка файлов шрифтов.

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

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

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

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

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

1. Для начала войдите в свою админ панель WordPress и выберите Плагины> Добавить новый.

2. Введите Google Fonts Typography в поле поиска и выберите «Установить сейчас».

3. Выберите Активировать.

4. Затем откройте настройщик, выбрав «Внешний вид»> «Настроить».

5. Выберите раздел Google Fonts.

6. Затем щелкните ссылку, чтобы открыть настройки шрифтов и настроить их следующим образом:

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

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

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

7. Вы можете протестировать эти настройки в настройщике, чтобы убедиться, что они работают так, как вы хотите, а затем выбрать «Опубликовать».

Примечание. Если вы забудете выбрать публикацию в настройщике, вы потеряете все внесенные изменения.

Как добавить веб-шрифты с помощью кода

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

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

Если вы купили тему из каталога тем WordPress, создайте дочернюю тему и дайте ей файлы style.css и functions.php. Будет проще, если у вас есть настроенная тема, поскольку вы можете редактировать таблицу стилей и файл функций из своей темы.

1. Для начала выберите шрифт из Google шрифты библиотеки и щелкните значок + (плюс), чтобы добавить ее в свою библиотеку.

2. Затем выберите вкладку внизу, где вы найдете код для добавления на свой сайт. Перейдите в раздел «Встроить шрифт» на вкладке «Встроить». Вы найдете код, созданный Google Fonts, который выглядит примерно так:

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

3. Скопируйте эту часть кода: https://fonts.googleapis.com/css2?family=Work+Sans

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

4. Чтобы поставить шрифт в очередь, откройте файл функций и добавьте следующий код. (Замените ссылку ссылкой, полученной из Google Fonts):

function wosib_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style (‘шрифты Google’);
}

add_action (‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’);

5. Вы можете добавить новую строку к своей функции или к той же строке, если хотите добавить больше шрифтов в будущем, следующим образом:

function mybh_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style (‘шрифты Google’);
}

add_action (‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’);

В этом случае мы поставили в очередь шрифты Cambria и Work Sans.

Следующим шагом является добавление шрифтов в таблицу стилей вашей темы, чтобы шрифт работал на вашем сайте.

1. Для этого откройте файл style.css вашей темы и добавьте код для стилизации отдельных элементов с вашими веб-шрифтами следующим образом:

body {
семейство шрифтов: «Work Sans», без засечек;
}

h1, h2, h3 {
семейство шрифтов: ‘Cambria’, serif;
}

В этом случае основным шрифтом будет Work Sans, а в элементах заголовка, таких как h1, h2 и h3, будет использоваться Cambria.

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

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

body {
семейство шрифтов: Work Sans, Arial, sans-serif;
}

h1, h2, h3 {
семейство шрифтов: ‘Cambria’, Times New Roman, serif;
}

Если все в порядке, посетители вашего сайта будут видеть веб-шрифты по умолчанию, в нашем случае Work Sans и Cambria. Если есть проблемы, они увидят резервные шрифты, например, Arial или Times New Roman в нашем случае.

2. Как изменить шрифты в WordPress с помощью хостинга шрифтов

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

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

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

2. Затем перейдите в wp-content / themes / themename, чтобы загрузить файл шрифта в свою тему.
3. Откройте таблицу стилей и добавьте следующий код (в данном случае мы используем шрифт Work Sans, но вы можете заменить его своими собственными шрифтами):

@ font-face {
семейство шрифтов: Work Sans;
src: url («шрифты / Work Sans-Medium.ttf») в формате (‘woff’); /* Средняя */
font-weight: нормальный;
стиль шрифта: нормальный;
}

@ font-face {
семейство шрифтов: Work Sans;
src: url («шрифты / Work Sans-Bold.ttf») в формате (‘woff’); /* Средняя */
font-weight: жирный;
стиль шрифта: нормальный;
}

@ font-face {
семейство шрифтов: ‘Cambria’;
src: url («шрифты / Cambria.ttf») в формате (‘woff’); /* Средняя */
font-weight: нормальный;
стиль шрифта: нормальный;
}

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

4. Затем добавьте стиль для ваших элементов следующим образом:

body {
семейство шрифтов: Work Sans, Arial, sans-serif;
src: url («/ fonts / Work Sans-Medium.ttf»);
}

h1, h2, h3 {
семейство шрифтов: ‘Cambria’, Times New Roman, serif;
}

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

Изменение шрифтов в WordPress — отличная идея для улучшения брендинга и удобства пользователей. Это непростая задача, но у вас будет больше контроля над своей темой.

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