Существует несколько способов изменить шрифты в WordPress. С одной стороны, можно форматировать текстовые блоки или отдельные разделы в редакторе. Это легко, но вскоре приводит к непоследовательности внешнего вида в долгосрочной перспективе.
Лучше определить шрифты для всего сайта в теме. Таким образом поддерживается последовательный и привлекательный дизайн. Однако для внесения изменений вам понадобятся права администратора и немного опыта. Мы покажем вам, как лучше всего изменить шрифты WordPress.
- Изменение шрифтов в WordPress
- Как задать шрифт для HTML-элемента в CSS?
- Как включить дополнительный CSS в WordPress?
- Как добавить другой шрифт в WordPress?
- Как самостоятельно разместить веб-шрифт как часть WordPress?
- Font Squirrel
- Use Any Font
- Что такое шрифты-иконки?
- Как использовать веб-шрифт из Google Fonts в WordPress?
- Какие методы можно использовать для включения веб-шрифта в WordPress?
- Как настроить шрифт в WordPress?
- Как изменить размер шрифта в wordpress
- Как изменить цвет шрифта в WordPress?
Изменение шрифтов в WordPress
Рассмотрим самый простой случай изменения шрифта для существующего сайта WordPress. Обычно тема задает шрифт для всего текста. Предположим, что это общий шрифт sans-serif. Теперь мы хотим изменить заголовки на шрифт с засечками. В WordPress это требует двух шагов:
- Определить шрифт для элементов HTML в CSS
- Включить код CSS в WordPress
Чтобы определить шрифт для HTML-элемента, мы используем CSS-свойство «font-family». Связанное свойство «@font-face» используется для определения пользовательских шрифтов.
| Спецификация CSS | Объяснение | Пример |
|---|---|---|
| font-family | Установить шрифт | body { font-family: ‘my-custom-font’, sans-serif; } |
| @font-face | Определите пользовательский шрифт | @font-face { font-family: ‘my-custom-font’; src: local(‘my-custom-font.woff2’; } |
Среди широкого спектра устройств, используемых для отображения веб-контента, существует небольшой набор практичных шрифтов Websafe Fonts. Они работают практически везде; однако, есть небольшие различия во внешнем виде. Чтобы сгладить их, можно использовать так называемые стеки шрифтов CSS. Это группы похожих шрифтов, из которых браузер выбирает первый доступный.
Как задать шрифт для HTML-элемента в CSS?
Сначала давайте рассмотрим, как задать шрифт для элемента HTML в CSS. В нашем примере мы хотим использовать шрифт с засечками для заголовков H1 — H6. Мы используем следующий код:
h1, h2, h3, h4, h5, h6 {
font-family: serif;
}Как включить дополнительный CSS в WordPress?
Существуют различные методы интеграции дополнительных CSS в WordPress. Какой именно будет использоваться, зависит от того, как построена тема. Коммерческие темы и конструкторы страниц часто предлагают пользовательские настройки для включения дополнительных CSS. Мы покажем два распространенных метода, которые работают с большинством тем, соответствующих стандартам:
- Использование WordPress Customizer для включения дополнительных CSS; иллюстрируется скриншотами.
- Включение дополнительного CSS через файл functions.php, в идеале в дочерней теме; конкретная процедура описана в нашем руководстве по редактированию заголовка WordPress.
Для изменения шрифта в WordPress полезны следующие статьи:
- Создание дочерних тем WordPress: Как это работает
- WordPress Gutenberg: Что делает новый редактор
- Учебник: Редактирование заголовков WordPress
- WordPress staging — безаварийная разработка и тестирование
Как добавить другой шрифт в WordPress?
Для добавления шрифта на сайт необходим веб-шрифт. Его можно получить непосредственно из Google Fonts или аналогичной платформы. Для этого достаточно включить в WordPress дополнительную таблицу стилей, размещенную Google. Однако при этом могут возникнуть проблемы с конфиденциальностью. В зависимости от метода, используемого для встраивания веб-шрифта, может пострадать производительность сайта. Поэтому обычно предпочтительнее размещать веб-шрифты в папке темы на сервере WordPress.
Для включения веб-шрифтов в веб-сайт помимо файлов шрифта требуется специальная таблица стилей. Такие платформы, как Google Fonts, предлагают таблицы стилей и файлы шрифтов для загрузки, а также для встраивания в веб-сайты. Это удобно, но оптимальное использование требует специальных знаний и особого подхода. Это связано с тем, что каждый дополнительный шрифт загружается браузером и «стоит» соответственно.
Как самостоятельно разместить веб-шрифт как часть WordPress?
Самостоятельный хостинг веб-шрифтов — проще сказать, чем сделать. Лучше всего использовать специализированный инструмент, который генерирует все распространенные форматы веб-шрифтов из загруженных файлов шрифтов, включая необходимый код CSS. За многие годы Font Squirrel зарекомендовал себя как стандарт. В качестве альтернативы можно использовать плагин Use Any Font для добавления шрифта в WordPress.
Font Squirrel
Use Any Font
Что такое шрифты-иконки?
Помимо веб-шрифтов для отображения текста, существуют популярные шрифты-иконки. Глифы шрифта не обязательно должны представлять собой буквы. Векторы, которые они содержат, — это просто математически определенные фигуры. Таким образом, вы можете отображать иконки, которые часто используются, например, в социальных сетях.
Внимание: Иконные шрифты не следует путать с проверенным временем фавиконом сайта.
Как использовать веб-шрифт из Google Fonts в WordPress?
В большинстве случаев предпочтительнее размещать веб-шрифты самостоятельно. Однако бывают и исключения. Возможно, вам просто нужно опробовать новый шрифт на пробном сайте. Или речь идет о небольшом блоге, где производительность не так важна. Поэтому для полноты картины мы приводим здесь необходимую процедуру.
Чтобы добавить шрифт из Google Fonts в WordPress, выполните следующие шаги:
- Выберите нужный шрифт из Google Fonts: Используйте функцию поиска и фильтрации или ориентируйтесь на свой вкус.
- Выберите отдельные варианты стиля: Имейте в виду, что каждый дополнительный вариант стиля заставит вас загрузить еще один файл шрифта.
- Разместите код таблицы стилей в заголовке WordPress — как описано в нашем руководстве о том, как редактировать заголовок WordPress.
- Установить шрифт с помощью CSS — либо для всего сайта, либо для отдельных элементов.
Какие методы можно использовать для включения веб-шрифта в WordPress?
Подводя итог, мы показали распространенные методы, которые можно использовать для добавления шрифта в WordPress. Все они имеют свои преимущества и недостатки:
| Встраивание веб-шрифта | Преимущество | Недостаток |
|---|---|---|
| Использование оператора CSS @import | Простой, поддерживается Google Fonts; требует доступа только к таблице стилей. | Плохо влияет на производительность сайта; может препятствовать параллельной загрузке таблиц стилей. |
| Включение CSS через <ссылку rel=»stylesheet»>. | Простой, поддерживается Google Fonts; требует доступа только к заголовкам WordPress; может положительно сказаться на производительности сайта, если внешняя таблица стилей извлекается из кэша. | Требуется доступ к теме или заголовкам WordPress; может ухудшить производительность сайта, так как таблица стилей загружается как отдельный ресурс. |
| Использование плагина webfont | Простой; управляется из приборной панели WordPress; работает со шрифтами, которые не размещены в открытом доступе. | Требуется установка другого плагина; меньше контроля по сравнению с ручным методом и генератором веб-шрифтов. |
| Включение CSS через wp_enqueue_style(). | Более высокая производительность сайта, поскольку таблицы стилей минимизируются и конкатенируются. | Требуется доступ к теме или functions.php. |
| Определение правила CSS @font-face | Большая степень контроля, включая исправление FOUT. | Требуются специальные знания. |
| Создание веб-шрифта с помощью генератора и интеграция в тему. | Работает со шрифтами, которые не размещены в открытом доступе; наибольшая степень контроля генерируемых файлов шрифтов и правил @font-face. | Сгенерированные файлы должны быть интегрированы в тему и при необходимости настроены; требует специальных знаний. |
Как настроить шрифт в WordPress?
До сих пор мы обсуждали, как изменить шрифт в WordPress. Теперь давайте рассмотрим, как изменить размер и цвет шрифта в WordPress. По сути, мы используем ту же процедуру, что и для изменения шрифта в WordPress:
- Найдите целевой элемент и определите селектор.
- Прототип правил CSS в веб-инспекторе
- Включение спецификаций CSS в WordPress
Обзор наиболее важных спецификаций CSS для изменения размера и цвета шрифта в WordPress:
| Спецификация CSS | Объяснение | Пример |
|---|---|---|
| font-size | Установка размера шрифта | p { font-size: 1rem; } |
| font-weight | Установить вес шрифта | strong { font-weight: bold; } |
| цвет | Установить цвет шрифта | a { цвет: синий; } |
Как изменить размер шрифта в wordpress
Давайте снова рассмотрим самый простой случай: Мы хотим изменить размер шрифта на всем сайте в WordPress. Для этого мы используем корневой элемент HTML в качестве селектора с процентами для размера шрифта. Это позволяет интуитивно понять, как изменить размер:
- «Сделать шрифт на 10% больше»: html { font-size: 110%; }
- «Отобразить шрифт на 10% меньше»: html { font-size: 90%; }
Итак, как же нам изменить размер шрифта определенных элементов? В качестве примера снова возьмем заголовки H1 — H6. Сначала давайте посмотрим, как этого делать НЕ нужно:
h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }Здесь две вещи идут не так: Во-первых, пиксели («px») используются как абсолютная единица измерения. Во-вторых, размеры отдельных шрифтов выбираются произвольно. Последнее приводит к непоследовательному и неровному дизайну. К сожалению, оба «антипаттерна» можно найти во многих — даже коммерческих — темах WordPress. Для указания размеров шрифтов лучше использовать относительные единицы. С помощью единицы «rem» спецификации размеров относятся к корневому элементу HTML. Соответственно, спецификация «2rem» означает: «вдвое больше обычного размера шрифта».
Сочетание процентов для корневого элемента HTML и rem для всех остальных элементов текста идеально подходит для отзывчивого дизайна. Все, что вам нужно, — это несколько CSS Media Queries для разной ширины экрана, которые регулируют размер шрифта корневого элемента HTML. Все остальные текстовые элементы автоматически масштабируются вместе с ним, сохраняя пропорции между собой:
/* Mobile-first font size */
html { font-size: 100%; }
/* 'medium' Breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) {
html { font-size: 105%; }
}
/* 'large' Breakpoint */
@media screen and (min-width: 60em) {
html { font-size: 110%; }
}Остается вопрос, по какому усмотрению выбирать значения размеров отдельных текстовых элементов. Как уже говорилось выше, не стоит выбирать произвольные значения. Хорошим подходом является использование «типографской шкалы». Типографские шкалы вдохновлены музыкальными гармониями и основаны на математических формулах, таких как золотое сечение. Размеры шрифта, расположенные в шахматном порядке в соответствии с типографской шкалой, выглядят гармонично. Удобно, что в Интернете можно найти генераторы, которые автоматически генерируют необходимый код CSS. Здесь мы используем в качестве примера типографскую шкалу фреймворка «Tachyons»:
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }
Как изменить цвет шрифта в WordPress?
Возможно, вы уже догадались: Чтобы изменить цвет шрифта в WordPress, мы не просто выделяем весь текст на странице, а затем выбираем новый цвет из меню. Вместо этого мы действуем аналогично шрифту и задаем цвет с помощью CSS-кода. Для CSS типично то, что существует несколько методов достижения желаемого результата. Мы не можем здесь подробно описывать все способы задания цветовых спецификаций в CSS. Следующие правила CSS являются эквивалентными:
body {
color: black;
color: #000000;
color: #000;
color: rgb(0, 0, 0)
}Как видите, чтобы задать цвет шрифта для всего сайта, мы используем элемент HTML body со свойством CSS «color». Все остальные текстовые элементы наследуют от него. При необходимости мы переопределяем унаследованное значение цвета для определенных классов элементов. Например, чтобы отобразить заголовки темно-серым цветом, мы используем следующий код:
h1, h2, h3, h4, h5, h6 {
color: #555555;
}Цвет шрифта, как и тип шрифта, является важным элементом дизайна. Цвета в особой степени передают эмоции. Поэтому важно придерживаться последовательности и не использовать слишком много цветов на странице. Непоследовательная или плохо скоординированная цветовая гамма производит тревожный эффект и может отпугнуть посетителей страницы. Если есть сомнения: Меньше — больше.
Для повышения удобства использования важно обеспечить достаточно высокий коэффициент контрастности. Только в этом случае тексты будут читаться без усилий. К счастью, значения контрастности можно рассчитать для комбинаций текста и цвета фона. Уже упомянутый фреймворк Tachyons поставляется с готовой таблицей цветов, включающей некоторые высококонтрастные комбинации. Если вы скопируете оттуда подходящие значения цветов для своего сайта WordPress, вы не ошибетесь.
В зависимости от используемого редактора, можно изменить цвет шрифта в WordPress без использования CSS. Обычно это быстро приводит к непоследовательности внешнего вида и поэтому не является хорошей идеей. Современный редактор Gutenberg предлагает жизнеспособную золотую середину. В Gutenberg есть предопределенная цветовая палитра, которая может быть адаптирована к цветовой схеме темы. Если вы назначаете блоку один из предопределенных цветов текста, редактор добавляет лишь несколько классов CSS. Таким образом, сохраняется разделение тем; при необходимости классы можно впоследствии перезаписать или отключить.
Однако Gutenberg также позволяет назначать «индивидуальный цвет» отдельным участкам текста из коробки. Этого следует избегать любой ценой. Вместо предопределенного имени класса, Gutenberg вставляет индивидуальный цвет как жестко закодированное значение цвета для каждого инлайн-стиля в HTML-код. Показано здесь в качестве примера:
<span style="color:#38a300" class="has-inline-color">I live in Los Angeles, have a great dog named Jack, and I like piña coladas</span>Инлайн-стили обладают наибольшей специфичностью CSS и поэтому упорно выживают при последующих редизайнах. Поэтому рекомендуется отключить пользовательские цвета в редакторе. Для этого мы вводим следующий код в файл functions.php нашей дочерней темы:
function disable_gutenberg_custom_color_picker() {
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_picker' );В качестве альтернативы можно полностью отключить цветовую палитру Gutenberg. Опять же, мы используем файл functions.php:
function disable_gutenberg_custom_color_palette() {
add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_palette' );Оптимальным способом изменения шрифтов в WordPress является глобальное изменение настроек шрифта с помощью CSS. Лучше всего использовать стандартизированные стеки шрифтов CSS. Если необходим пользовательский веб-шрифт, настоятельно рекомендуется минимизировать количество вариантов стилей. Если нужный шрифт доступен в виде переменного шрифта, следует отдать предпочтение именно ему. Для максимального контроля размещайте шрифты самостоятельно и используйте генератор веб-шрифтов.
Если вы хотите изменить размер и цвет шрифта в WordPress, редактор Gutenberg предлагает хороший компромисс. При условии, что индивидуальные размеры и цвета шрифтов были отключены в настройках темы, можно легко использовать предопределенные значения.