Как изменить и добавить шрифт в вордпресс: основные способы

Удобный Вордпресс-плагин шрифтов от Google Fonts.

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

Устанавливаем плагин из репозитория WordPress, активируем. Переходим в пункт меню консоли «Внешний вид» — «Настроить». В блоке слева жмем «Typography» — «Default Typography». Видим, что для редактирования доступны параграфы и заголовки шести уровней.

Кликаем по кнопке «Edit Font» под тем из данных элементов, шрифт которого хотим изменить. Открывается вкладка «Styles». Здесь для редактирования доступны такие параметры:

кодировка («Script»);
непосредственно семейство шрифта («Font Family»);
толщина и стиль текста («Font Weight/Style»);
свойства css text-decoration и text-transform.

Переходим на вкладку «Appearance». Здесь представлены следующие свойства:

цвет текста («Font Color»);
цвет фона элемента («Background Color»);
размер шрифта («Font Size»);
межстрочный интервал («Line Height»);
расстояние между буквами («Letter Spacing»).

Вкладка «Positioning» отвечает не за стили шрифта, а за позиционирование параграфов и заголовков. Здесь можно изменить внешние/внутренние отступы («Margin»/«Padding»), свойства рамки вокруг элемента и радиус скругления ее углов («Border» и «Border Radius»). А также в поле «Display» возможно определить, как элемент будет отображаться на странице: занимать собой всю строку («block»), или обтекаться другими элементами («inline-block»).

При нажатии кнопки «Edit Fonts» справа появляется кнопка сброса стилей «Reset», что очень удобно. Стоит отметить и то, что данный плагин шрифтов для WordPress позволяет следить за всеми изменениями, которые мы производим, в режиме реального времени.

Итак, сегодня мы с вами детально рассмотрели те свойства css, которые отвечают за отображение текста на страницах блога и научились изменять шрифты в теме WordPress. Также мы познакомились с основными способами добавления пользовательских шрифтов: с помощью Google Fonts, правила @font- face и плагина Easy Google Fonts. Надеюсь, данная информация поможет вам гибко настроить выведение контента на страницах блога.

Чтобы подключить CSS файл к обычной HTML странице нужно:

Первый способ подключения CSS к HTML странице

Между тегами

<head></head>

прописать следующий код:

<link rel='stylesheet' type='text/css' href='css/reset.css'>

Тут все довольно просто, — это папка, куда помещен файл стилей, — сам подключаемый файл.

Или так, с указанием полного адреса URL нахождения стилевого файла:

<link rel='stylesheet' type='text/css' href='http://filwebs.ru/css/reset.css'>

Данным кодом можно подключить любой css файл, даже если он размещен на стороннем ресурсе.

Второй способ подключения CSS к HTML странице

Можно подключить CSS файл через . В данном случае подключаемый файл импортируется в основной файл CSS, дополняя его.

Для этого нужно в самом начале (см. название своего файла) прописать следующий код:

@import "css/reset.css";

Или для стороннего файла стилей, с указанием полного адреса:

@import url("/css/reset.css");

Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.

Может пригодиться статья — Как прописать правильный путь к папке с файлом.

Из личного опыта

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

В этой статье я не буду затрагивать такие моменты как «точечное подключение» или компановка стилей в HTML файле. А лучше перейду к главному.

Как получить доступ к странице настройки WordPress

Страница Настройки WordPress также известна как «Настройщик (Customizer) WordPress». Она была введена в версии 3.4, и с тех пор позволяет пользователям предварительно просматривать сайт, пока с ним производятся изменения. Какой лучший способ настроить Ваш сайт, но чтобы его версия реального времени сохранялась? Главное заключается в том, что эти текущие временные изменения не влияют на сайт в реальном времени, так что Ваши посетители не смогут видеть, что Вы делаете, пока не сохраните изменения.

Это страница Настройщика. WordPress открыл домашнюю страницу Вашего блога и включил Настройщик в левой части экрана. Теперь Вы готовы начать вносить изменения в свой сайт.

Найти в Фотошопе похожий шрифт и использовать его

Зайдите в Фотошоп и кликните на кнопку “Прямоугольная область”
Выделите нужный Вам шрифт;

Далее в верхнем меню кликаем Текст -> Подбор шрифта;

Далее система подберет Вам похожие шрифты. Выберите один из них и действующий шрифт будет заменен на доступный для Фотошопа.

Нестандартный шрифт KaushanScript на PSD макете до замены.

Нестандартный шрифт заменили на стандартный Verdana Bold. Невооруженным взглядом рядового пользователя разницы не видно.

А вот при замене шрифта Kaushan Script разница уже будет заметна.

Нестандартный шрифт Kaushan Script на PSD макете до замены.

Нестандартный шрифт заменили на стандартный Segoe Print Bold.

Проверяйте каждый шрифт отдельно.

Advanced Typing Effect

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

Вы сможете настраивать:

с какой скоростью набирается текст;
через какое время после открытия страницы анимация будет активироваться;
будет ли виден курсор;
нужно ли зацикливать анимацию после её первого проигрывания;
и другие параметры набора.

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

Повлияет ли изменение шрифта на мое SEO?

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

Загрузка файлов шрифтов повлияет на скорость загрузки страницы. Google PageSpeed Insights и другие инструменты измерения скорости будут отображать предупреждения, когда шрифты препятствуют загрузке содержимого страницы. Чтобы этого избежать, выбирайте только необходимый вес шрифта, чтобы не загружать кучу файлов шрифтов на ваш сайт. как упоминалось выше, «Плагин шрифтов» может помочь в этом, чтобы загрузить только требуемые веса шрифта. Когда вы используете настройки темы или собственный CSS, обязательно позаботьтесь об этом.
Вы должны предварительно загрузить файлы шрифтов, используемые на вашем сайте, чтобы удалить ошибки запросов на предварительную загрузку в Google PageSpeed Insights. Узнайте больше о том, как предварительно загрузить файлы шрифтов в WordPress.
Убедитесь, что у вашего сайта правильный размер и интервал. В противном случае вы увидите ошибки в Google PageSpeed, например, слишком близкие элементы и меньший размер шрифта.
Использование внешнего шрифта, такого как Google Fonts, увеличит время загрузки и, следовательно, замедлит ваш сайт. Вы можете использовать плагины кеширования, такие как WP Rocket, для оптимизации и объединения всех используемых вами внешних шрифтов Google.
Когда вы меняете шрифт, Google и другие поисковые системы будут пытаться найти предыдущие файлы шрифтов на вашем сайте. это вызовет ошибку 404, как если бы вы удалили старые шрифты. Как правило, вам не нужно устанавливать 301 редирект для отсутствующих файлов шрифтов и игнорировать их, поскольку эти ошибки не влияют на пользователей.

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

Особое отображение шрифтовСкопировать ссылку

Перед тем как браузер сможет показать веб-шрифт, он должен скачать его по сети. Обычно это занимает какое-то время, и каждый браузер по-разному ведёт себя во время скачивания веб-шрифтов: некоторые из них скрывают текст, а другие сразу же показывают его с помощью запасного шрифта. Обычно это называют мельканием невидимого текста (Flash Of Invisible Text, FOIT) и мельканием текста без стилей (Flash Of Unstyled Text, FOUT).

FOUT и FOIT.

Internet Explorer и Edge используют FOUT и отображают запасные шрифты, пока веб-шрифт не закончит свою загрузку. Все остальные браузеры используют FOIT и прячут текст во время загрузки веб-шрифтов.

Для управления этим поведением ввели новое CSS-свойство, называемое (CSS Font Rendering Controls). К сожалению, оно до сих пор находится в разработке и ещё не поддерживается ни одним браузером (на данный момент оно спрятано за флагом в Chrome и Opera). Однако мы можем реализовать аналогичное поведение во всех браузерах с помощью Font Face Observer.

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

Простейший способ сделать это — устанавливать на элемент по классу на каждое из трёх состояний загрузки веб-шрифта: сам процесс загрузки, его завершение и ошибку. Класс устанавливается сразу, как начинается загрузка, — когда шрифт загружен, и — если загрузка не удалась.

При помощи этих классов и простого CSS вы можете кроссбраузерно использовать FOUT. Начнём с объявления запасных шрифтов для всех элементов, которым понадобятся веб-шрифты. Когда в появляется класс , мы применяем веб-шрифт, изменяя цепочку шрифтов для всех соответствующих элементов. Изменение правила в CSS заставит браузер загрузить веб-шрифт, однако, поскольку к этому моменту он уже будет загружен, перерисовка начнется практически мгновенно.

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

Реализация FOIT такая же простая. Когда веб-шрифты начинают загрузку, вы скрываете контент, использующий шрифты, а когда они загружены, вы показываете его снова. Не забывайте и об ошибке загрузки — контент должен быть доступен, даже если шрифты не смогли загрузиться.

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

Изменение шрифта WordPress с помощью CSS

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

Как изменить шрифт WordPress через стили CSS

Где мы можем найти стили CSS? Самый простой способ — войти в консоль WordPress. Затем откройте левое меню на вкладке «Внешний вид», а затем — «Редактор тем». В списке, который появится в правой части окна, откройте вкладку с именем style.css. Не бойтесь кода — нам нужно будет только внести очень небольшие изменения.

В главном окне редактора теперь нам нужно найти позицию, которая будет называться Fonts, Text и т. д. Она обычно имеет структуру, подобную следующему примеру:

/ * Шрифты * /
@font-face {
font-family: Arial;
src: url(‘fonts/arial-regular.eot’);
src: url(‘fonts/arial-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/arial-regular.woff’) format(‘woff’),
url(‘fonts/arial-regular.ttf’) format(‘truetype’),
url(‘fonts/arial-regular.svg#quattrocento-regular’) format(‘svg’);
font-weight: normal;
font-style: normal;}

Чтобы изменить основные шрифты на странице, просто замените название — например, вместо «Arial» — «Times New Roman». Конечно, вы должны помнить правильное написание шрифта. В случае системных шрифтов вам не нужно вводить их адрес — они доступны автоматически для большинства браузеров. Однако если мы хотим загрузить какой-то необычный шрифт, мы должны сначала загрузить его на сервер — через FTP, а затем добавить его имя в файл style.css.

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

Затем выберите опцию «Изучить элемент» из контекстного меню. Окно браузера будет разделено на две части. На уровне стилей (вкладка «Стили») мы можем узнать, какая отметка из CSS определяет конкретный блок текста. Например, весь текст, кроме заголовка, определяется @ font-face.

Как изменить шрифт в шаблоне WordPress

Итак, перейдем к действиям. Изменяем заголовок статей. Все, что нужно сделать – это найти в файле стилей style.css строку, на подобии этой:

font-family : Arial, Helvetica, Sans-Serif;

Теперь в этой строке нужно дописать шрифт, который Вы хотите применить к шаблону WordPress по умолчанию. В моем случае, я дописал шрифт « Adventure ». Этот шрифт не является безопасным, поэтому скорее всего я его позже сменю. Пока я изменил только шрифт заголовков. Вот так теперь выглядит строка в файле styles.css:

font-family : Adventure, Arial, Helvetica, Sans-Serif;

Я дописал шрифт « Adventure ». Не советую удалять остальные шрифты в этой строке. Если зайти на мой блог через браузер Google Chrome, Mozilla или Опера, то шрифт « Adventure » виден, но, если зайти на блог с мобильного телефона, этот шрифт уже не отображается, но отображается следующий шрифт, который идет за « Adventure » — « Arial ».

Так, если бы я оставил только один шрифт « Adventure », а остальные удалил, то прочитать заголовок с мобильного телефона уже было бы не возможно. Сейчас Вы можете посмотреть видео, как я изменял шрифт на своем тестовом блоге.

https://youtube.com/watch?v=BkkTipzX86A

______________________________ К уроку 133. Правильная перелинковка страниц сайта

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

Для начала стоит определиться с целью — вы хотите полностью изменить шрифт на новый, или отредактировать старый. Начнем с 1-го варианта

сайта на хостинге

Изменить надпись (текст) на сайте WordPress “Wordpress Copyright” можно очень просто. Редактируем ссылку «WordPress Copyright» в файле «footer.php».

Вставим свой код в подвал (footer) сайта/блога и внесем дополнительную информацию вашего веб-ресурса.Чтобы открыть настройки, переходим на хостинг:

~ «Менеджер файлов» /www

Редактируем ссылку «WordPress Copyright» в файле «footer.php»

/ваш веб-ресурс/wp-content/themes

WordPress ссылка. Как изменить надпись в подвале сайта WP

WordPress ссылка. Как редактировать надпись в подвале сайта на хостинге

Изменить надпись (текст) на сайте WordPress “Wordpress Copyright”

Переходим в папку «Дочерняя тема». У меня это:

/donovan-child

Папка «Дочерняя тема»

Далее, файл «footer.php», в котором отредактируем ссылку Wordpress copyright.

В footer.php меняем копирайт «Сайт работает на wordpress»

Нажав папку «Изменить», заменим код «WordPress Авторские права» на свой.

Редактируем WordPress Авторские права

Вставляем свою информацию в подвал (футер) сайта или блога. Например, код, расположенный ниже — это информация о сайте:

2019 — это год регистрации веб-ресурса;
строка <?php echo date(‘Y‘) ?> автоматически выводить текущий год;
следующая строка — это название сайта/блога (ссылка на главную страницу сайта);
и ваш текст.

<a href=»<?php echo home_url( ‘/’ ); ?>» title=»<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>» rel=»home»>

<?php bloginfo( ‘name’ ); ?>

</a> <br>Копирование материалов без обратной ссылки на сайт ЗАПРЕЩЕНО!</div></center>

В данном коде ссылка на главную страницу веб-ресурса активна!

Чтобы сделать ссылку неактивной, можно ввести любой текст в простой код:, и обновить файл:

Вот так выглядит откорректированный текст в подвале сайта простым кодом!

Редактируем wordpress copyright

Это всё!

В статье «Как Редактировать WordPress copyright, футер сайта» мы разобрали, как вручную добавить код «CSS» в файл «style.css» и скрыть надпись «WordPress copyright».

Рассмотрели, как изменить дизайн веб-ресурса, отредактировав ссылку WordPress copyright темы в файле «footer.php» и внести необходимую информацию в данный файл.

P.S. SEO Оптимизация, Продвижение, Сайт Развитие

Создать Лэндинг в 2 клика бесплатно в Elementor — ВАЖНАЯ БЕСПЛАТНАЯ ИНФОРМАЦИЯ

Удачи!

С уважением

Татьяна.

Как подключить CSS файл к WordPress

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

Первый способ подключить CSS файл к WordPress

Открываем файл и сразу перед закрывающим тегом нужно прописать такой код:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/css/reset.css" />

Это то-же самое, что и в верхнем примере, только написано на языке PHP. Нужно только правильно прописать путь к папке и файлу .

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

Регистрация CSS файлов в WordPress

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

Добавляем в файл этот код:

function my_style_load() {
$theme_uri = get_template_directory_uri();
wp_register_style('my_theme_style', $theme_uri.'/css/reset.css', false, '0.1');
wp_enqueue_style('my_theme_style');
}
add_action('wp_enqueue_scripts', 'my_style_load');

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

function my_style_load() — — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире)

Обратите внимание, что встречается оно в коде два раза

$theme_uri = get_template_directory_uri(); — значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.

wp_register_style(‘my_theme_style’, $theme_uri.’/css/reset.css’, false, ‘0.1’); — идентификатор стилей, может быть произвольным.

/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.

Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.

Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!

Возможно вам будет интересно

Подключение скрипта к WordPress
Подключение и отключение скриптов и стилей на отдельной странице, записи WordPress
Системные шрифты, подключение шрифтов к сайту

— Как вам статья «Как на WordPress подключить CSS файл?» Если что, пишите.

Цены на вешалки magazin-veshalok.ru.

Как менять размер шрифта в CSS / HTML

Размер на сайте менять таким же способом как я описал выше, но тут другой селектор font-size и возле него могут стоять данные, как в пикселях (px), процентах (%), так и (em) – это размер в процентах, так обычно делают при создании адаптивного шаблона и шрифтов, которые автоматически на различных устройствах отображаются правильно и красиво. Вообщем смотрите на скрин

Тем самым мы и шрифт отредактируем и придадим жирность. Что касается поменять шрифт в HTML, то так обычно не делают, а если уж надо, то просто добавьте в HTML редакторе код <font size=”25″><b>У тебя все получится! </b></font> Тем самым мы и шрифт отредактируем и придадим жирность.

Шаг №1 Сделайте бэкап файла style.css

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

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

Примечание: Если нет локального ресурса (домашняя платформа для экспериментов и проверки результатов), рекомендую обратить внимание на OpenServer или Denwer. Это пошаговое руководство по созданию бесплатного сайта-тренажера на ПК

Прежде чем отдадите предпочтение какому-либо серверу, узнайте о различиях, выберите лучший.

В первом случае, перейдите: Консоль управления WP→ Внешний вид → Редактор тем. Откройте файл стилей, скопируйте весь код. Сохраните в каком-либо редакторе на компьютере. При необходимости, заменив содержание файла, вернете первоначальные настройки.

Скопируйте содержание файла style.css

Если работаете на локалке, используя «Денвер», проще скопировать файл style.css, перейдя в директорию: Z: (или папка Сервер)→ home → localhost → www → web → wp-content → themes → название установленной темы. Найдите файл стилей, скопируйте, сохраните в удобном месте.
В случае использования OpenServer, путь будет таким: Диск, на который установили платформу (у меня это D:/) — OSPanel — domains — домен сайта — wp-content— themes — название Темы — style.css.

Если не понравится новый вид страниц (не заметили, что изменились блоки связанные одним кодом настроек), замените содержание или файл стилей на копию

Неважно, какой вариант используете, главное — возможность вернуть прежние настройки

Обратите внимание: Если изменяемый параметр, например, цвет, есть в кастомных настройках Темы, правка кода не нужна. Меняйте цвет в окне, которое открывается слева

Этот функционал имеет приоритет.

Кастомные настройки цвета в Теме wordpress имеют приоритет

Как поменять цвет шрифта в Вордпресс через CSS

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

Для того что бы поменять цвет шрифта существует CSS правило color. Выглядит это примерно так в коде:

В данном примере p это селектор параграфов, т.е. мы меняем цвет для всего текста заключенного в тэг параграфа p.
color соответственно это атрибут, который мы хотим поменять у параграфа, который означает цвет
#af7070 это всего лишь шестнадцатеричный код цвета в RGB, соответствующий коричневому оттенку.

Хорошая новость — вам вовсе не обязательно учить все правила и коды цветов, достаточно иметь современный браузер и воспользоваться инструментом просмотра кода (CTRL+Shift+I для хрома)

Выбираем стрелочкой нужный нам элемент на странице, который хотим изменить, и слева можем увидеть текущие стили данного элемента.

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

Например вы поменяли цвет шрифта параграфов на черный, выглядеть это будет теперь так

Копируем данный код и сохраняем по следующему адресу: Админка — Внешний вид — Настроить — Дополнительные стили

Там откроется окошко, в котором вы можете сохранять все ваши собственные стили, без риска потери изменений при обновлении шаблона.

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

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

По аналогии с изменением цвета, все тоже самое, только вместо атрибута color для указания размера текста используется атрибут font-size. Несколько правил записываются вместе, с новой строки через; Выглядит это будет так вместе с цветом и размером:

Где 17px это указание размера шрифта в пикселях. Можете подобрать оптимальные для себя значения изменяя эту цифру.

Как изменить семейство шрифта на ВП

Но что делать если изначально шрифт на сайте вам не нравится и вы хотите другой? Тут все сложнее.

Браузеры по умолчанию поддерживают не так много шрифтов, их вы можете увидеть в таблице ниже:

За семейство шрифтов отвечает CSS правило font-family и выглядит полностью оно так в нашем примере:

Где font-family это атрибут семейства, а перечисления Arial, Helvetica, Sans-Serif через запятую это указания шрифтов и типа шрифтов.

В первую очередь браузером будет браться тот шрифт, который указан первым, т.е. Arial в нашем случае. Остальные в списке это запасные, они будут использоваться браузером только в том случае, если у пользователя не найдется на компьютере шрифта Arial (что вряд ли возможно ибо он стандартный для браузеров). Но как правило, не используются.

Если же вы хотите установить нестандартный шрифт на сайт, то придется поколдовать немножко) Проще всего будет использовать плагины, типа WP Google Fonts.

Либо можно зайти на сайт того же гугла https://fonts.google.com/ и подобрать там что-то интересное, а затем следуя несложной инструкции подключить данный шрифт на свой сайт.

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

А какой у вас любимый шрифт для сайта? Мои например это PT Sans, Tahoma и Verdana

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

Обратите внимание, в рамках данной статьи мы не будем подробно останавливаться на том, каким образом редактируются тема Вордпресс и стили CSS. Если вам не известны эти процессы, рекомендую предварительно ознакомиться с материалом о структуре шаблона и о файле style.css

Google Fonts Typography

Установить плагин

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

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

Конкретный шрифт будет необязательно использовать сразу на всём сайте. Можно выбрать два или более, настроив, где будет отображаться каждый из них. Особенности Google Fonts Typography:

работает с любым шаблоном ВордПресс;
совместим с SEO;
поддерживает все шрифты, представленные в библиотеке от Google;
подходит даже для начинающих вебмастеров, никогда не работавших с кодом;
подходит для последних версий WordPress.

Подключение через @font-face

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

Google Fonts также позволяет скачивать бесплатные шрифты, чтобы хранить на хостинге вместе с проектом и подключать их через @font-face

На странице выбранного шрифта, сверху справа нажимаем на кнопку Download family

Разархивируем скачанный zip-файл и видим файлы выбранного шрифта всех возможных его начертаний в формате *.ttf

У веб-шрифта должен быть определенный формат, который будет поддерживаться браузерами. На данный момент самый оптимальный формат веб-шрифтов — *.woff (Поддержка формата WOFF)

Чтобы конвертировать файлы формата *.ttf в формат *.woff воспользуемся бесплатным онлайн сервисом Transfonter

В открывшемся окне ищем папку в которую был разархивирован скачанный zip-файл, и выбираем необходимые начертания шрифта

Выбранные начертания шрифта будут загружены в сервис для конвертирования

Ниже расположены настройки конвертирования. Справа в списке форматов шрифтов выбираем только формат WOFF. Все остальные настройки оставляем по-умолчанию

Далее нажимаем кнопку Convert

После того, как шрифты будут сконвертированы, ниже слева появится ссылка Download для скачивания

Скачанный zip-файл содержит сгенерированные стили CSS для подключения шрифтов и *.woff файлы шрифтов

Файлы шрифтов копируем в папку fonts нашего проекта. Названия файлов шрифтов не изменяем.

Файл stylesheet.css содержит следующие сгенерированные стили

Копируем все содержимое файла stylesheet.css в самое начало нашего основного файла стилей CSS.

Так как основной файл стилей находится в папке css, отличной от папки, где лежат файлы шрифтов, необходимо внести некоторые изменения — в url добавляем относительный путь до папки fonts (остальные свойства не меняем)

Аналогично используем подключенный шрифт в файле стилей CSS

Преимущество данного способа в том, что веб-шрифты храняться на хостинге вместе с проектом, и не зависят от сторонних сервисов

Подведем итоги

Если вам нужен бесплатный плагин WordPress для шрифтов, тогда ориентируйтесь на свои навыки. Не знаете английский — выбирайте Google Fonts Typography, устанавливающийся и настраивающийся на русском языке. Если доверяете мнению большинства, тогда загружайте Easy Google Fonts, выбор в пользу которого сделан на более чем 300 тысячах сайтов. Однако, вебмастерам именно из России больше всего нравится WP Google Fonts из-за его удобства в работе. Все собранные в статье плагины для работы со шрифтами заслуживают внимания, просто одни из них лучше подойдут в конкретном случае, а другие хуже.

Если для вас важна возможность консультироваться с техподдержкой, и вы предполагаете, что библиотеки от Гугл вам будет достаточно, тогда обратите внимание на Google Web Fonts. Если вы хотите пользоваться и другими библиотеками, например, Adobe Edge web fonts, тогда стоит купить плагин FontPress

Также стоит попробовать:

Advanced Typing Effect, создающий эффект печатающей машинки;
iOS7 Style Font Icons, добавляющий на сайт стильные иконки;
Responsive SVG Handwritting Text Animation, использующийся для размещения на страницах красивых и ярких текстовых анимаций.