Здравствуйте, друзья! В этом уроке мы разберем с Вами как изменить шрифт на сайте WordPress. Устанавливать новый шрифт будем с Google Fonts, так как это самый популярный, простой и надежный сервис с огромным выбором шрифтов. Итак, приступим!
Как подключить на сайт шрифт с Google Fonts
1. Сперва нужно выбрать шрифт, который мы будем устанавливать на сайт. Для этого переходим на сайт Google Fonts и сразу же сортируем шрифты так, чтобы они были «кириллические». Если этого не сделать, то подключенный шрифт может не работать с русским или украинским текстом.
Также можно отсортировать шрифты по типу и другим параметрам.
2. Теперь выберите из списка понравившийся шрифт и нажмите кнопку «Quick-use».
3. В открывшемся окне нужно отметить галочками стили (к примеру Normal, Medium, Bold), которые собираетесь использовать на сайте. Также рекомендую ставить галочку и на латинским наборе, так как зачастую на сайте используются и латинские буквы.
4. Далее нужно подключить выбранный шрифт на сайт. Для этого прокручиваем станицу чуть ниже и выбираем один из предложенных способов подключения.
Давайте разберем более детально способы подключения Standard и @import.
Способ 1
Standard — нужно скопировать строчку подключения шрифта и добавить ее в шапку сайта.
Сделать это очень просто. Переходим с административной панели в Внешний вид -> Редактор -> Заголовок (header.php) и добавляем код в содержимое тега <head></head>. Результат будет выглядеть так (на примере темы Twenty Twelve):
Способ 2
@import — нужно скопировать и добавить код в CSS стили сайта.
О том, как открыть и редактировать CSS стили мы говорили в одном из прошлых уроков.
Важно! Используйте только один способ подключения, не нагружайте зря сайт.
Использование нового шрифта на сайте
После подключения шрифта нужно указать, на каких текстовых элементах сайта он будет использоваться. Для этого скопируйте строчку в самом низу страницы Google Fonts и добавьте ее к классам и идентификаторам, у которых хотите заменить шрифт.
К примеру, для изменения шрифта на заглавиях h1, h2, h3 нужно добавить (или заменить, если для элементов уже установлен какой-то шрифт) такой код:
h1, h2, h3 { font-family: 'Roboto', sans-serif; }
Как видите, сложного совершенно ничего нету. Изменить шрифт на сайте — дело 5 минут.
В случае, если у Вас что-то не получилось или возникли вопросы — смело пишите в комментариях.
Добрый день.
Хотел уточнить по последнему пункту. Куда необходимо вписывать:
1. h1, h2, h3 {
2. font-family: ‘Roboto’, sans-serif;
3. }
Здравствуйте!
В файл style.css, который находится в папке с темой.
Здравствуйте! Все сделал по инструкции но шрифт все равно не поменялся. Проверял через расширение Analyze Selection. Хотя старый шрифт в style.css полностью заменил на новый. Может как-то сайт нужно дополнительно перезагрузить?
Очисти кэш в браузере
Спасибо большое. Благодаря ваше статье поменяла шрифт. Все четко, ясно и без лишней воды.
Но теперь мне обязательно надо увеличить размер шрифта в постах. Уже второй день ищу как это сделать — ничего не получается. Подскажите, пожалуйста, в какой папке и в каком месте значение font-size надо увеличить?
заранее спасибо
Спасибо, статья очень помогла, но остались вопросы. Нужный шрифт легко удалось установить, но в мобильной версии сайта изменились только цифры и латинские буквы. Что нужно сделать, чтобы выбранный шрифт подгружался и на смартфонах?
Разобралась. Нужно было прописать
subset=cyrillic»
Подскажите, плз, везде шрифт меняется, но при попытке заменить шрифт только в верхнем меню — ничего не выходит. Подставляю шрифт в body, но меняется не только в меню, но и в некоторых участках текста. Как изменить шрифт только в меню
Если у элементов указан свой шрифт, то подставлять нужно не только в body. Замените в стилях каждого элемента старый шрифт на новый.
Спасибо, удалось, но в мобильной версии шрифт остался прежним. Наведите на путь истинный
Вероятнее всего, есть отдельные стили для мобильных устройств. Там заменить нужно также шрифт.
Вот в этом вся и проблема, стиля mob не обнаружено
а как загрузить шрифт ttf файлом?
Заголовк являются еще одной областью, где вы можете добавить элементы навигации на ваш сайт. Как правило, эти горизонтальные меню в верхней или нижней части заголовка. Чтобы добавить эти, создайте новый блок в заголовоке — блок навигации, и примените стиль к этому блок.
Здравствуйте, у меня в шаблоне заголовок курсивом. Как убрать курсив? В основном тексте мелкий шрифт и большое расстояние между буквами. Как убрать эту проблему? Спасибо
А у меня прямо в теме можно менять шрифты 😉
https://tabhub.ru/ — сайт на woodmart
Не могу поменять шрифт.
Шрифт заголовка слайдера поменял так:
.frddie_all_dead_header_hero .char {
font-family: «Philosopher»;
}
Все шрифты поменять на Philosopher не получается(
https://www.tair.rv.ua/