Типография Вордпресс: как улучшить шрифты

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

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

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

Как улучшить типографию блога wordpress

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

Давайте начнем:

Некоторые правила типографии

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

Типография Вордпресс: как улучшить шрифты

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

Для ручного подхода можете поместить свой код в поле «Внешний вид»> «Редактировать CSS».

Типография Вордпресс: как улучшить шрифты

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

Вы можете добавить свой собственный шрифт в четыре простых шага: 

1) Выберите веб-шрифт, который вы хотите использовать (он должен быть в формате, например, eot, svg, .ttf и. woff).

2) Загрузите файлы шрифтов на свой сервер (например, создайте папку с именем fonts и добавьте в нее файлы). 

3) Загрузите плагин Simple Custom CSS для добавления кода CSS (ссылка для загрузки ). 

4) Добавьте код, приведенный ниже, в пользовательскую область CSS (Внешний вид -> Пользовательский CSS):

Посмотреть

Убедитесь, что вы заменили «YOUR FONT NAME» на имя шрифта, а http: // FONT ADDRESS — на путь к вашим шрифтам.

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

 

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

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

Например, вот настройки типографии из темы, которую я установил на одном из моих сайтов:

Типография Вордпресс: как улучшить шрифты

Сравните это с Twenty Fifteen, которое позволяет вам изменять цвета текста на вашем сайте и ничего о шрифте:

Типография Вордпресс: как улучшить шрифты

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

Изменение шрифтов с помощью плагина

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

  1. STYLEGUIDE

Типография Вордпресс: как улучшить шрифты

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

Google Fonts — одна из самых удобных библиотек веб-шрифтов, потому что все шрифты бесплатны даже для коммерческого использования. Если вы ищете еще больше вариантов шрифтов, Font Squirrel (неофициальный) — еще один бесплатный плагин WordPress, который вытаскивает веб-шрифты из Font Squirrel с использованием их официального API.

После поиска плагина, установки его на вашем сайте и активации его, вы можете настроить шрифты своего блога в разделе «Внешний вид»> «Настроить» в меню WordPress. Это откроет Live Customizer. После того, как вы нажмете «Цвета и шрифты», ваши варианты будут выглядеть так:

Типография Вордпресс: как улучшить шрифты

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

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

  1. WP GOOGLE FONTS

Типография Вордпресс: как улучшить шрифты

Для случаев, когда вы хотите установить определенные шрифты и шрифты для определенных заголовков, WP Google Fonts — это плагин для вас. В качестве одного из самых популярных бесплатных плагинов WordPress, он имеет более 100 000 активных инсталляций плюс 4-звездочный средний обзор, и это плагин, который я регулярно использую при создании нового веб-сайта WordPress.

Помимо того, что вы можете выбрать более 100 веб-шрифтов Google, вы можете выбрать необходимый вам вес, проверить, какие стили применить к нему, и даже ввести пользовательский CSS. Используя этот плагин, вы можете настроить до шести разных шрифтов и то, к чему они применяются. (Не то, что вы должны использовать, что многие — шрифты выглядят наиболее профессиональными, когда вы придерживаетесь спаривания только двух или, самое большее, трех.)

Типография Вордпресс: как улучшить шрифты

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

К сожалению, вы не можете просматривать изменения на своем веб-сайте до того, как они начнут жить с плагином WP Google Fonts, в отличие от Styleguide, но уровень настройки, который вы получаете взамен, стоит того.

Вывод

Изменение стилей в стиле блога WordPress является одним из самых быстрых и простых способов изменить настроение вашего сайта, независимо от того, выполняете ли вы его с помощью настроек темы, инструмента WordPress Live Customizer или бесплатного плагина, такого как Styleguide или WP Google Fonts.

Используете ли вы один из этих плагинов для настройки своей типографии WordPress или у вас есть другой фаворит? Пожалуйста, поделитесь комментариями ниже.

2 комментария

  1. Сергей 26.06.2018 в 09:03

    Спасибо, попробую что-нибудь поменять у себя, а то тему менять не хочется, а вид уже не устраивает

    • Денис Майнер 26.06.2018 в 10:48

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

Комментирование не разрешено.