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

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

Если вы только что установили тему WordPress^{(installed a WordPress theme)} или имеете некоторый опыт работы с CSS и кодированием, мы покажем вам несколько вариантов, которые вы можете использовать для изменения шрифтов в WordPress .

Как изменить шрифты в WordPress^{(How to Change Fonts in WordPress)}

Существует три основных варианта изменения шрифтов в WordPress:

• Используйте веб-шрифты, такие как Google Fonts , Fonts.com или веб-шрифты Adobe Edge^{( Adobe Edge Web Fonts)} , размещенные на стороннем сайте.
• Кодируйте^(Code) веб-шрифты в свою тему и ставьте их в очередь
• Размещайте^(Host) шрифты на своем сайте и добавляйте их в свою тему

1. Как изменить шрифты в WordPress с помощью веб-шрифтов^{(1. How to Change Fonts in WordPress Using Web Fonts)}

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

С помощью этой опции вы можете получить доступ к различным шрифтам,^{(access a variety of fonts)} не обновляя их каждый раз при изменении, и это не занимает место на сервере вашего хостинга. Шрифты подаются непосредственно с серверов провайдера с помощью плагина или путем добавления кода на ваш сайт.

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

Вы можете добавить веб-шрифты с помощью плагина WordPress^{(using a WordPress plugin)} или вручную, добавив несколько строк кода на свой сайт. Давайте изучим оба варианта.

Как добавить веб-шрифты с помощью плагина WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

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

1. Чтобы начать, войдите в панель администратора WordPress и выберите Plugins > Add New .

1. Введите Google Fonts Typography в поле поиска и выберите « Установить сейчас»^{(Install Now)} .

1. Выберите Активировать^(Activate) .

1. Затем войдите в Customizer , перейдя в Appearance > Customize .

1. Выберите раздел « Шрифты Google^{(Google Fonts)} ».

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

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

• В разделе «Дополнительные настройки^{(Advanced Settings)} » настройте заголовок и описание сайта, меню, заголовки и содержимое, боковую панель и нижний колонтитул.

• Снимите флажки^(Uncheck) со всех нежелательных весов шрифтов в разделе « Загрузка шрифтов^{(Font Loading)} », чтобы не замедлять работу сайта^{(avoid slowing down your site)} .

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

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

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

Как добавить веб-шрифты с помощью кода^{(How to Add Web Fonts Using Code)}

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

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

Если вы купили тему из каталога тем WordPress , создайте дочернюю тему^{(create a child theme)} и передайте ей файлы style.css и functions.php. Это проще, если у вас есть настроенная тема, поскольку вы можете редактировать таблицу стилей и файл функций из своей темы.

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

1. Затем выберите вкладку внизу, где вы найдете код для добавления на свой сайт. Перейдите в раздел « Встроить шрифт^{(Embed font)} » на вкладке « Встроить ». ^(Embed)Вы найдете код, сгенерированный Google Fonts , который выглядит примерно так:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

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

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

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

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

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

wp_enqueue_style('GoogleFonts');
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

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

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

wp_enqueue_style('GoogleFonts');
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

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

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

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

body {
семейство шрифтов: 'Work Sans', sans-serif; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
семейство шрифтов: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

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

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

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

body {
семейство шрифтов: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
семейство шрифтов: «Cambria», Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

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

2. Как изменить шрифты в WordPress с помощью хостинга шрифтов^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Размещение шрифтов на ваших собственных серверах помогает вам оптимизировать производительность ваших веб-шрифтов, но это также более безопасный способ^{(a more secure way)} сделать это, чем использовать ресурсы со сторонних сайтов.

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

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

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

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
вес шрифта: нормальный; ^{( font-weight: normal;)}
стиль шрифта: обычный; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
вес шрифта: полужирный; ^{( font-weight: bold;)}
стиль шрифта: обычный; ^{(font-style: normal;)}
}

@font-face {
семейство шрифтов: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
вес шрифта: нормальный; ^{( font-weight: normal;)}
стиль шрифта: обычный; ^{( font-style: normal;)}
}

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

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

body {
семейство шрифтов: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
семейство шрифтов: «Cambria», Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Настройте свою типографику WordPress^{(Customize Your WordPress Typography)}

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

Удалось ли^(Were) вам настроить шрифты вашего сайта, следуя инструкциям, приведенным в этом руководстве? Расскажите^(Tell) нам в комментариях.

How to Change Fonts in WordPress

A great way to add some branding and individualism to your WordPress sіte is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

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

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

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

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Как переместить WordPress site от одного хоста на другой

• Как установить и настроить WordPress на Microsoft Azure

• Как бегать восколы быстро WordPress на Microsoft Azure

• Как настроить Privacy в WordPress и почему это важно

• Как установить WordPress на Google Cloud Platform

• Как обновить PHP в WordPress

• 9 обязательных плагинов для новых установок WordPress

• Лучший формат написания блога, чтобы донести свою точку зрения

• Как создать блог Wix, который так же хорош, как WordPress

• Как удалить все следы плагина WordPress

• Как сделать резервную копию вашего сайта WordPress

• Как проводить эффективные сплит-тесты в WordPress

• Как редактировать нижний колонтитул в WordPress

• Как отслеживать Broken Links с Google Webmaster Tool

• Как изменить URL-адрес входа в WordPress для большей безопасности

• Как перейти от классического редактора WordPress к Gutenberg

• Как установить тему на WordPress

• Что такое AMP для WordPress и как его установить

• 3 лучших SEO-плагина для WordPress

• Как сделать WordPress Site Secure