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

Как изменить шрифт на сайте 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. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим! Как подключить на сайт шрифт с Google Fonts 1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были "кириллические". Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом. Также можно отсортировать шрифты по типу и другим параметрам. 2. Теперь выберите из списка понравившийся шрифт и&hellip;

Обзор

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

Рейтинг: 4.66 ( 22 голосов )
100

18 комментариев

  1. Аватар

    Добрый день.
    Хотел уточнить по последнему пункту. Куда необходимо вписывать:

    1. h1, h2, h3 {
    2. font-family: ‘Roboto’, sans-serif;
    3. }

  2. Аватар
    Александр

    Здравствуйте! Все сделал по инструкции но шрифт все равно не поменялся. Проверял через расширение Analyze Selection. Хотя старый шрифт в style.css полностью заменил на новый. Может как-то сайт нужно дополнительно перезагрузить?

  3. Аватар

    Спасибо большое. Благодаря ваше статье поменяла шрифт. Все четко, ясно и без лишней воды.
    Но теперь мне обязательно надо увеличить размер шрифта в постах. Уже второй день ищу как это сделать — ничего не получается. Подскажите, пожалуйста, в какой папке и в каком месте значение font-size надо увеличить?

    заранее спасибо

  4. Аватар
    Александра

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

  5. Аватар

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

  6. Аватар

    а как загрузить шрифт ttf файлом?

  7. Аватар

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

  8. Аватар

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

  9. Аватар

    А у меня прямо в теме можно менять шрифты 😉
    https://tabhub.ru/ — сайт на woodmart

  10. Аватар
    Виталик

    Не могу поменять шрифт.
    Шрифт заголовка слайдера поменял так:

    .frddie_all_dead_header_hero .char {
    font-family: «Philosopher»;
    }
    Все шрифты поменять на Philosopher не получается(
    https://www.tair.rv.ua/

Оставить комментарий

Ваш email не будет опубликован.

*