28.03.2024

Как изменить шрифт на сайте WordPress

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

Как подключить на сайт шрифт с Google Fonts

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

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

Как изменить шрифт на сайте WordPress

Также можно отсортировать шрифты по типу и другим параметрам.

2. Теперь выберите из списка понравившийся шрифт и нажмите кнопку «Quick-use».

Как подключить на сайт шрифт с Google Fonts

3. В открывшемся окне нужно отметить галочками стили (к примеру Normal, Medium, Bold), которые собираетесь использовать на сайте. Также рекомендую ставить галочку и на латинским наборе, так как зачастую на сайте используются и латинские буквы.

Как изменить шрифт на сайте WordPress

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

Давайте разберем более детально способы подключения Standard и @import.

Способ 1

Standard — нужно скопировать строчку подключения шрифта и добавить ее в шапку сайта.

Как изменить шрифт на сайте WordPress

Сделать это очень просто. Переходим с административной панели в Внешний вид -> Редактор -> Заголовок (header.php) и добавляем код в содержимое тега <head></head>. Результат будет выглядеть так (на примере темы Twenty Twelve):

Как изменить шрифт на сайте WordPress

Способ 2

@import — нужно скопировать и добавить код в CSS стили сайта.

Как изменить шрифт на сайте WordPress

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

Важно! Используйте только один способ подключения, не нагружайте зря сайт.

Использование нового шрифта на сайте

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

Использование нового шрифта на сайте

К примеру, для изменения шрифта на заглавиях h1, h2, h3 нужно добавить (или заменить, если для элементов уже установлен какой-то шрифт) такой код:

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Как видите, сложного совершенно ничего нету. Изменить шрифт на сайте — дело 5 минут.

В случае, если у Вас что-то не получилось или возникли вопросы — смело пишите в комментариях.

Установка нового шрифта на сайт WordPress

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *