Что такое шрифты и как изменить шрифты в WordPress

Хотите изменить шрифт на своем сайте WordPress? Хотите знать, как изменить шрифты и настроить внешний вид вашего сайта WordPress? Хотите узнать о различных способах изменения шрифта в WordPress?

Невероятно, как простое изменение в типографике может иметь все значение.

От обычного забавного шрифта, такого как Comic Sans, до более профессионального и серьезного шрифта, такого как Helvetica, шрифт может оказать огромное влияние на восприятие вашего веб-сайта.

К счастью, изменить шрифт в WordPress относительно просто. Большинство тем имеют встроенные опции для смены шрифтов.

Но что, если в вашей теме нет нужного шрифта? Можете ли вы добавить дополнительные шрифты в тему WordPress?

Обо всем этом и многом другом мы расскажем в этой статье.

Мы также расскажем, как изменить шрифт с помощью компоновщика страниц, редактора WordPress, CSS, настройщика тем и многого другого.

Хотите изменить шрифты WordPress для определенных фрагментов контента? Мы прикрыли вас и там!

Что такое шрифты и как они работают?

Содержание

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

Некоторые примеры шрифтов включают Arial 12 pt, Verdana 10 pt жирный, Times New Roman 14 pt курсив, Roboto, Georgia и многие тысячи других.

Как правило, мы знаем шрифты как Arial или Verdana, но шрифт также включает размер «12 pt» и детали стиля «жирный» или «курсив».

Здорово! Итак, мы знаем, что такое шрифт. Если вы подумываете о покупке шрифта в Интернете, вы заметите, что многие из них продаются как семейство. Итак, что такое семейство шрифтов?

Давайте рассмотрим пример, чтобы прояснить это.

Если вы используете MS Word или Google Docs, вы можете легко выделить текст жирным шрифтом, курсивом или даже полужирным курсивом. Это разные варианты одного и того же шрифта, составляющие семейство шрифтов.

Как показано ниже, вот пример семейства шрифтов «Roboto».

Семейство шрифтов Roboto

Roboto — это семейство, состоящее из нескольких шрифтов, таких как:

  • Робото Обычный
  • Робото Тонкий 100
  • Roboto Thin 100 Курсив
  • Робото Лайт 300
  • Roboto Light 300 Курсив
  • Робото Обычный 400
  • Roboto Regular 400 курсив
  • Робото Средний 500
  • Roboto Medium 500 курсив
  • Робото Жирный 700
  • Roboto Bold 700 курсив
  • Робото Блэк 900
  • Roboto Black 900 курсив

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

Давайте рассмотрим некоторые часто используемые термины, связанные со шрифтами.

Что такое веб-шрифты?

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

Для правильной загрузки веб-шрифтов требуется четыре типа файлов. Это файл TrueType, файл EOT, файл WOFF и файл SVG. Каждый из этих файлов предназначен для определенных браузеров.

Чтобы шрифты на вашем веб-сайте правильно отображались во всех браузерах, при использовании веб-шрифтов вам потребуются все четыре типа файлов.

Что такое локально размещенные шрифты?

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

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

Что такое веб-безопасные шрифты?

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

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

Примеры веб-безопасных шрифтов включают Arial, Times New Roman, Verdana, Helvetica и Georgia.

Что такое шрифты Google?

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

Сайт Google Шрифты

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

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

https://fonts.googleapis.com/css?family=FontName“>

Вышеупомянутая строка кода должна быть добавлена ​​внутрь

раздел вашей страницы. Вам нужно будет заменить FontName фактическим названием шрифта.

Например, если вы хотите использовать шрифт Arial, синтаксис будет таким:

https://fonts.googleapis.com/css?family=Arial“>

Как только это будет сделано, вы можете включить в свою таблицу стилей CSS следующее:

.css-selector {
font-family: 'FontName', serif;
}

Или добавьте встроенный стиль непосредственно к самому элементу:

ИмяШрифта’, с засечками;”>Текст

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

Что такое потрясающий шрифт?

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

Чтобы использовать Font Awesome, добавьте следующую строку кода в

раздел вашей страницы.

Вам не нужно ничего скачивать или устанавливать. Чтобы использовать значки Font Awesome, просто добавьте префикс fa к имени значка.

Например, как показано на изображении ниже, вы можете включить значок автомобиля, добавив « fa fa-car » вэлемент.

Что такое Font Awesome

При изменении размера шрифта или цвета значок изменяется соответствующим образом.

Как изменить шрифты WordPress с помощью настройщика тем

Варианты, использованные выше, отлично работают при изменении шрифтов для отдельных элементов и блоков.

Но что, если вы хотите применить изменения шрифта на своем веб-сайте?

Хорошая новость заключается в том, что это можно быстро сделать с помощью настройщика темы.

Перейдите в « Внешний вид»> «Настроить» , чтобы получить доступ к настройщику WordPress.

Настройщик темы Astra

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

Если вы используете тему Astra, нажмите Global , а затем вкладку Typography .

Вкладка «Типографика темы Astra»

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

Хотите настроить и изменить шрифт для отдельных заголовков? Без проблем!

Изменить заголовки шрифтов в теме Astra

От H1 до H6 вы сможете изменить шрифт для каждого тега заголовка так, как хотите.

Лучшая часть использования настройщика WordPress — это просмотр изменений, которые вы вносите в режиме реального времени. Таким образом, вы можете решить, что лучше всего подходит для вашего сайта с предварительным просмотром в реальном времени.

Когда вы будете довольны всеми изменениями, нажмите « Опубликовать » , чтобы сохранить изменения.

Как изменить шрифты WordPress с помощью плагина

Что делать, если в вашей теме нет нужного шрифта? Или, может быть, в вашей теме вообще нет возможности менять шрифты?

В таких случаях можно использовать плагин. Плагин шрифта позволит вам легко изменить шрифт в WordPress, не касаясь кода.

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

Некоторые популярные плагины: Easy Google Fonts, Fonts Plugin | Типография шрифтов Google и шрифты WP Google.

Легкие шрифты Google

Легкий плагин Google Fonts для WordPress

Плагин Easy Google Fonts позволяет вам легко добавлять шрифты Google в свою тему без добавления ни одной строки кода. Вы также можете просмотреть изменения, которые вы вносите в режиме реального времени, используя настройщик WordPress.

Чтобы использовать этот плагин, установите Easy Google Fonts на свой сайт WordPress.

После установки плагина перейдите в « Внешний вид» > «Настроить» .

Перейдите к Типографика > Типографика по умолчанию .

Типография по умолчанию

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

Изменить настройки абзаца шрифта

У вас есть несколько вариантов настройки шрифта, с которыми можно поиграть. Вы также можете стилизовать и расположить текст именно так, как хотите.

Завершив внесение изменений, нажмите « Опубликовать » .

Хотите добавить пользовательские элементы управления шрифтом?

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

Но что, если вы хотите изменить шрифт для элемента цитаты?

Плагин Easy Google Fonts упрощает эту задачу. Однако для этого вам нужно немного знать CSS. По крайней мере, вам нужно знать имя контейнера CSS.

Самый простой способ определить имя контейнера — загрузить веб-страницу, щелкнуть правой кнопкой мыши шрифт и выбрать « Проверить » .

Проверка кода для получения сведений о шрифте

На вкладке « Стили » вы увидите имя контейнера, в данном случае это blockquote .

Определив имя контейнера, перейдите в « Настройки» > «Простые шрифты Google» .

Создание пользовательского элемента управления шрифтом

Введите имя для вашего элемента управления шрифтом. Это только для справки. Например, мы назвали наш пользовательский элемент управления « Мой стиль цитаты» .

Затем в разделе «Селекторы CSS управления шрифтом» добавьте свой селектор CSS. В этом случае мы добавим «blockquote».

Когда вы закончите, нажмите «Создать элемент управления шрифтом » .

Теперь вернитесь к Appearance > Customize > Typography .

Типография настройщика

Теперь вы найдете дополнительную вкладку Theme Typography .

Щелкните Типографика темы .

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

Оформление темы с помощью плагина

Теперь вы можете легко настроить и изменить шрифт любого элемента на вашем сайте WordPress без написания кода!

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

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

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

Не открывая таблицы стилей вашего веб-сайта, вы можете легко добавить CSS через настройщик WordPress.

Перейдите в « Внешний вид» > «Настроить» > «Дополнительный CSS» и разместите код CSS.

Дополнительный CSS для изменения шрифта

Допустим, вы хотите настроить тег H1.

Код CSS будет следующим:

h1{
font-family: verdana;
font-size: 30px;
color: #FF0000;
}

Это изменит тег H1 на вашем сайте на размер шрифта Verdana 30.

Точно так же, если вы хотите изменить шрифт тега абзаца на размер 20 и белый цвет (#FFFFFF), CSS будет:

p {
font-size: 20px;
color: #FFFFFF;
}

Хотя изменить шрифты с помощью CSS довольно просто, это определенно поможет, если вы знаете, как программировать.

Как изменить шрифты WordPress с помощью компоновщика страниц

Ранее мы рассказывали, как менять шрифты с помощью компоновщика страниц Elementor и Brizy. Однако это было для отдельного элемента.

Хотя это работает, вы можете изменить шрифт на всех страницах вашего веб-сайта WordPress с помощью компоновщика страниц.

Конструкторы страниц делают это очень простым. Мы будем использовать конструктор страниц Elementor, чтобы объяснить, как это сделать.

Самый простой способ — открыть любой пост или страницу с помощью редактора Elementor.

Elementor editor

Затем нажмите на три строки в верхнем левом углу вашего редактора.

Теперь нажмите «Настройки сайта » .

Настройки сайта Elementor

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

Elementor Глобальные шрифты и типографика

Вы можете изменить шрифт основного и дополнительного заголовков, а также текст и акцент. Если вы довольны предварительным просмотром в реальном времени, нажмите « Обновить » , чтобы сохранить изменения.

И вот как просто изменить шрифты с помощью компоновщика страниц!

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

Далее мы узнаем, как размещать локальные шрифты в WordPress. Но, прежде чем мы перейдем к тому, как, давайте разберемся, почему.

Почему мы должны размещать шрифты локально в WordPress?

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

Каждый HTTP-запрос добавляет дополнительную работу браузеру и замедляет загрузку страницы. Ни один из них не поможет пользователю!

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

Результатом является более быстрое время загрузки страницы, потенциальный импульс для вашего SEO и счастливые посетители!

Чтобы разместить шрифты локально, начните с выбора шрифта (шрифтов), которые вы хотите использовать на локальном сервере. Это может быть один шрифт или целое семейство шрифтов.

Затем создайте папку с именем «шрифты» на своем сервере с помощью FTP-клиента, такого как FileZilla, или файлового менеджера из панели управления хостингом.

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

Теперь загрузите все ваши файлы шрифтов в эту новую папку.

Допустим, вы загрузили шрифт « Roboto-Black.ttf » в удаленную папку «шрифты». В таком случае URL-адрес шрифта будет «https://domainname.com/fonts/Roboto-Black.ttf».

Нам нужно будет указать этот URL-адрес в нашем CSS на нашем сайте WordPress.

Вы можете либо отредактировать пользовательский CSS, либо использовать бесплатный плагин, такой как Simple Custom CSS и JS. С помощью плагина вставьте следующий код:

@font-face {
font-family: 'Roboto-Black';
src: url('https://domainname.com/fonts/Roboto-Black.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}

Вы бы, конечно, изменили «имя домена» на свое собственное доменное имя.

Как насчет стилей шрифта? Да, вам также необходимо обновить их.

Вот пример кода, который вы могли бы использовать:

body {font-family: 'Roboto-Black', Arial, sans-serif;}

Не забудьте сохранить и обновить страницы, когда закончите.

Важно отметить, что если Google Fonts уже интегрированы в вашу тему WordPress, вам не нужно будет размещать их локально.

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

Размещение Google Fonts локально в WordPress аналогично размещению обычных шрифтов, которые мы только что рассмотрели.

Весь процесс становится еще проще с помощью бесплатного инструмента, такого как google-webfonts-helper, который генерирует фактический код CSS, необходимый для вашего сайта WordPress.

Для начала выберите шрифт, который вы хотите разместить локально. Например, возьмем шрифт Abhaya Libre .

Шрифт Google Fonts Abhaya Libre

Далее выберите нужные стили. Мы будем использовать обычный и полужирный (800) стили шрифта.

Вы заметите, что код CSS готов, так что скопируйте его.

выберите копию CSS

Прокрутите вниз и загрузите файлы.

Скачать файлы шрифтов

Файл .ZIP включает различные форматы файлов, такие как EOT, TTF, SVG, WOFF и WOFF2.

Как только вы загрузите файл, повторите процесс, который мы рассмотрели ранее, подключитесь к своему серверу в реальном времени, создайте новую папку с именем fonts и загрузите файлы.

Хотя эти шаги довольно просты, тема Astra делает их еще проще.

Astra поставляется со встроенной функцией самостоятельного размещения шрифтов Google.

Все, что вам нужно сделать, это щелкнуть параметр « Загрузить шрифты Google локально » в разделе « Внешний вид»> «Настроить»> «Производительность» , чтобы включить его.

Загрузите шрифты Google локально, используя тему Astra

Включив эту функцию, вы будете отправлять только один запрос Google Font API. Этот один запрос соберет все данные о шрифтах из Google и сохранит их локально на вашем сервере.

5 плагинов для шрифтов WordPress, которые стоит попробовать

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

Легкие шрифты Google

Простой плагин Google Fonts

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

Кроме того, Easy Google Fonts позволяет создавать собственные элементы управления шрифтами для других элементов на вашем сайте WordPress.

Плагин шрифтов | Шрифты Google Типографика

Плагин Fonts Плагин Google Fonts Typography WordPress

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

Пользовательские шрифты

Плагин для WordPress с пользовательскими шрифтами

Custom Fonts — это популярный плагин шрифтов, разработанный Brainstorm Force, командой, стоящей за очень популярной темой Astra, и несколькими другими отличными продуктами, связанными с WordPress.

Используя пользовательские шрифты, вы можете легко встраивать файлы пользовательских шрифтов, такие как EOT, SVG, TTF, WOFF, WOFF2 и OTF, на свой сайт WordPress. Плагин без проблем работает с темой Astra, конструкторами страниц Beaver Builder и Elementor.

WP Гугл шрифты

Плагин WP Google Fonts для WordPress

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

Пользовательские шрифты Adobe (Typekit)

Пользовательский плагин Adobe Fonts для WordPress

Custom Adobe Fonts — еще один популярный плагин шрифтов от команды Brainstorm Force. Если вы когда-нибудь хотели легко встроить шрифты Adobe на свой веб-сайт WordPress, вам следует использовать этот плагин. Плагин работает с темой Astra и позволяет вам писать собственный CSS.

5 советов по выбору шрифта для вашего сайта

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

Итак, что вы должны учитывать при выборе шрифта для своего сайта?

1. Используйте стандартные шрифты

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

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

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

2. Выберите шрифт, который подходит для всех размеров

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

3. Выберите шрифт с четкими и различимыми буквами

Вас не спутали с похожими буквенными формами? Может, перепутали I с L или T с J? Выберите четкий шрифт, который не будет сбивать с толку вашу аудиторию. Проверьте на всех размерах экрана, чтобы убедиться.

4. Избегайте использования заглавных букв

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

5. Минимизируйте количество шрифтов

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

Часто задаваемые вопросы о шрифтах WordPress

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

Существует несколько способов изменить шрифты в вашей теме WordPress. Самый простой способ — получить доступ к типографике темы через настройщик WordPress. Хотя это может варьироваться в зависимости от вашей темы, если вы используете Astra, перейдите в « Внешний вид»> «Настроить»> «Глобальный»> «Типография» и измените шрифты.

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

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

Вы можете изменить шрифт в заголовке через настройщик WordPress. Если вы используете тему Astra, вы найдете Конструктор заголовков в разделе « Внешний вид» > «Настроить» . Вы можете не только оформить свой заголовок так, как вы хотите, но вы также можете изменить шрифт каждого элемента в вашем заголовке.

Какой шрифт по умолчанию в WordPress?

Шрифт по умолчанию зависит от выбранной вами темы WordPress. Например, в теме WordPress по умолчанию на 2020 год вы найдете шрифт без засечек, используемый для заголовков, и шрифт с засечками для основного текста. В теме WordPress 2021 года вы обнаружите, что Roboto используется для заголовков и без засечек для тела.

Какие шрифты я могу использовать в WordPress?

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

Как просмотреть шрифт в WordPress?

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

Как вы меняете шрифты в WordPress?

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

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

Как вы меняете шрифты в WordPress? Используете ли вы какой-либо из методов, упомянутых выше? Или мы что-то упустили? Мы хотели бы знать!

Call Now Button«Позвонить Сейчас»