9 лучших плагинов для типографики для WordPress

Опубликовано: 2021-06-26

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

1. Плагин Divi Builder

Плагин Divi

Плагин Divi Builder добавляет Divi Builder к любой теме WordPress. Он включает 800 шрифтов Google, и вы можете добавить свой ключ API Google для автоматического получения новых шрифтов. Вы также можете загрузить больше. Несмотря на то, что плагин Divi делает больше, чем просто типографику, это отличный выбор, даже если вы не полностью используете Divi Builder из-за большого количества функций типографики, которые он имеет. Параметры типографики также доступны в теме Divi.

Плагин Divi

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

Плагин Divi

Шрифты полностью стилизованы. Стиль встроен или в настройках модуля. Настройте каждый размер заголовка для каждого модуля независимо.

Плагин Divi

Установите стили как глобальные и распространите их на другие модули всего несколькими щелчками мыши.

Ключевые особенности :

  • Шрифты и стили текста.
  • Создавайте глобальные стили.
  • Настраивайте шрифты для настольных компьютеров, планшетов и телефонов независимо друг от друга.
  • Сплит-тестируйте свой выбор типографики.
  • Предварительный просмотр стилей перед применением.
  • Расширить стили.
  • Скопируйте и вставьте стили.
  • Менеджер цвета.
  • Найдите и замените стили.
  • Текстовые тени.

Цена : 89 долларов в год, 249 долларов при жизни | Больше информации

2. Используйте любой шрифт

Использовать любой шрифт

Use Any Font - это простой плагин типографики для WordPress, который позволяет загружать новые шрифты.

Использовать любой шрифт

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

Использовать любой шрифт

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

Использовать любой шрифт

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

Ключевые особенности :

  • Назначьте шрифты любому элементу.
  • Назначьте пользовательским элементам.
  • Загрузите новые шрифты.
  • Почти 24 000 предопределенных шрифтов.
  • Версия Pro добавляет несколько загрузок шрифтов.

Цена : Бесплатная профессиональная версия от 9,99 долларов | Больше информации

3. Расширенные инструменты редактора

Расширенные инструменты редактора

Advanced Editor Tools работает как с Gutenberg, так и с классическим редактором. Он добавляет множество вариантов типографики и позволяет настраивать панель инструментов классического редактора как в классическом блоке, так и в классическом редакторе. Он добавляет новый блок абзаца в Gutenberg. Вы также можете заменить редактор блоков классическим редактором, если хотите.

Расширенные инструменты редактора

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

Расширенные инструменты редактора

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

Ключевые особенности :

  • Добавляет параметры типографики в редакторы Gutenberg и Classic.
  • Настройте панели инструментов.
  • Отрегулируйте цвета текста.
  • Добавьте блок абзаца к Гутенбергу.
  • Замените редактор блоков классическим редактором.

Цена : Бесплатно | Больше информации

4. Типография Google Fonts.

Типография Google Fonts

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

Типография Google Fonts

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

Типография Google Fonts

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

Типография Google Fonts

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

Типография Google Fonts

Вы также можете добавить шрифты Adobe, если у вас есть ключ API.

Ключевые особенности :

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

Цена : Бесплатная профессиональная версия от 59 долларов | Больше информации

5. Font Awesome

Font Awesome

Font Awesome позволяет легко добавлять значки к вашему контенту. Вы можете использовать бесплатные или профессиональные значки и выбирать между SVG или веб-шрифтами. Иконки могут быть загружены из CDN или веб-комплекта. Иконки добавляются к вашему контенту с помощью шорткодов или HTML. Бесплатная версия включает более 1600 иконок, и вы можете добавить намного больше с профессиональной версией.

Font Awesome

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

Font Awesome

В этом примере показано, как значки Font Awesome добавляются к моему контенту с помощью шорткодов.

Font Awesome

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

Ключевые особенности :

  • Добавляйте иконки Font Awesome с шорткодами или HTML.
  • Более 1600 иконок для бесплатной версии.
  • Используйте SVG или веб-комплект.
  • Выберите CDN или комплект.
  • Версия Pro включает более 7800 значков, 4 стиля, 20 размещенных профессиональных комплектов, 250 загруженных значков и многое другое.

Цена : Бесплатная, профессиональная версия - 99 долларов | Больше информации

6. Руководство по стилю

Гид по стилю

Styleguide - это простой плагин для типографики для WordPress, который позволяет вам выбирать шрифты и цвета в настройщике темы. Он включает 45 лучших шрифтов Google, и вы можете добавить больше с помощью кода. Совместимость темы ограничена. По умолчанию он не работает с Divi. Если это не работает с вашей темой, вам придется добавить поддержку темы с помощью кода. Они включают пример кода.

Гид по стилю

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

Ключевые особенности :

  • В настройщик темы добавлен стиль шрифта.
  • Выбирайте шрифты для заголовка и основного текста независимо.
  • Темный режим.
  • Добавьте больше шрифтов с кодом.
  • Добавьте совместимость темы с кодом.

Цена : Бесплатно | Больше информации

7. Разделитель заголовков страниц

Разделитель заголовков страниц

Разделитель заголовков страниц позволяет вам устанавливать точки останова для ваших заголовков, чтобы определить, где они будут делиться. Это особенно полезно для небольших экранов. Он работает с классическим редактором и дает вам простую панель для размещения точки останова. Щелчок по значку открывает панель. Точка останова затем размещается там, где вы щелкаете внутри заголовка.

Разделитель заголовков страниц

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

Разделитель заголовков страниц

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

Разделитель заголовков страниц

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

Ключевые особенности :

  • Создает точки останова для заголовков.
  • Работает с классическим редактором.
  • Установите несколько маркеров.
  • Отрегулируйте точки останова с помощью CSS.

Цена : Бесплатно | Больше информации

8. Дополнительное название

Дополнительное название

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

Дополнительное название

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

Дополнительное название

Новое поле добавляется над заголовком, где вы можете ввести дополнительный заголовок.

Дополнительное название

Название отображается в соответствии с параметрами, выбранными на экране настроек. Это настройки по умолчанию.

Ключевые особенности :

  • Добавляет новое поле заголовка в классический редактор.
  • Настройте дизайн заголовка так, как хотите.
  • Выберите типы и категории сообщений, в которых используется дополнительный заголовок.

Цена : Бесплатно | Больше информации

9. Изменение размера шрифта Zeno

Изменение размера шрифта Zeno

Zeno Font Resizer позволяет вашим посетителям изменять размер шрифтов при просмотре вашего сайта. Файл cookie сохраняет настройки, поэтому им не нужно менять их каждый раз при посещении. Вы можете контролировать выбор, который они могут сделать, отображаемый значок, количество дней, в течение которых работает файл cookie, и многое другое.

Изменение размера шрифта Zeno

Экран настроек позволяет вам настроить HTML, изменить размер шагов, минимальный и максимальный размеры, символ, отображаемый для значка изменения размера, и настройки файлов cookie. HTML позволяет вам выбрать, как работает изменение размера.

Изменение размера шрифта Zeno

Я добавил средство изменения размера на боковую панель с помощью виджета.

Ключевые особенности :

  • Отрегулируйте шаги изменения размера.
  • Установите минимальный и максимальный размеры.
  • Выберите персонажа.
  • Cookie сохраняет настройки посетителя.
  • Добавьте его с помощью кода или виджета.

Цена : Бесплатно | Больше информации

Конечные мысли

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

Ждем вашего ответа. Какой ваш любимый плагин типографики для WordPress?

Лучшее изображение через ANTSTUDIO / shutterstock.com