При помощи бесплатного плагина для WordPress под названием Google Typography, вы можете использовать любой Google-шрифт на страницах своего сайта без необходимости заглядывать в код шаблона.
Один из важнейших аспектов веб-дизайна заключается в подборке подходящего шрифта. Дизайн с хорошей типографикой не только позволяет вам удостовериться в удобочитаемости вашего текста, но и также, при помощи различий в размерах и стилях шрифтов, позволяет вам акцентировать внимание на продукции, услугах, выделять специальные сообщения и призывать к действую. Так как шрифты являются ключевым компонентом дизайна и работы с контентом, было бы хорошо иметь под рукой готовое гибкое решение, позволяющее без труда справляться с подборкой шрифтов, их цветов и так далее.
Зачастую пользователи WordPress получают отличный контроль над шрифтами сайта в целом при установке профессиональных шаблонов WordPress. Все больше и больше шаблонов наделяют функционалом подбора шрифта за счет которых вам не нужно даже заглядывать в код страниц. Тем не менее, пока еще такие возможности встречаются нечасто, и для таких моментов идеальным решением станет бесплатный плагин Google Typography.
Сегодня мы хотим рассказать вам о Google Typography – бесплатном плагине, который позволяет пользователям устанавливать шрифты на сайте с использованием веб-шрифтов Google. Плагин предлагает простенький интерфейс, который поможет вам определить шрифты, выбрав подходящий и установив нужный размер и цвет. Выбранные шрифты без труда применяются к вашему веб-сайту посредством CSS-селекторов. Давайте взглянем на плагин поближе.
Сам плагин можно установить из Консоли, посредством поиска по плагинам, либо посредством загрузки zip-файл на сервер. После установки, настройки плагина станут доступными во вкладке Внешний вид в Консоли.
У плагина есть отдельная страница с настройками. Нижеприведенное изображение демонстрирует нам экран приветствия.
Добавлять новые шрифты не так уж и сложно. Просто нажмите на кнопку «Add New».
После нажатия по кнопке, перед вами появится пустое текстовое поле. Сюда можно вписать текст, чтобы видеть, как текст будет смотреться с выбранным шрифтом. Ниже вы можете видеть поля для указания настроек шрифта.
Выпадающее меню позволяет вам выбирать шрифт. Здесь также представлены дополнительные настройки и CSS-селектор.
Вы можете добавить столько шрифтов, сколько посчитаете нужным.
Как найти CSS-селектор в Chrome
Если вы не уверены насчет того, за какой отрезок текста на странице отвечает тот или иной селектор, вы можете воспользоваться функцией Проверки Элемента в Chrome. Если вы используете Firefox, то подобный функционал можно найти в расширении Firebug. Просто выделите текст, который вы хотите изменить, и кликните правой кнопкой мыши, а в появившемся меню опцию «Проверить элемент». Эта опция позволяет пользователям получать CSS-коды для отдельных фрагментов и элементов на странице. Этот код можно использовать для изменения используемых на странице стилей шрифта. В данном случае мы будем использовать “a.button”, чтобы изменить шрифт кнопки, показанной на примере.
После того, как вы найдете соответствующий CSS-код, копируйте его и вставляйте в CSS-селектор, как показано на изображении ниже.
После сохранения, шрифт на кнопке будет изменен в соответствии с внесенными изменениями, которые вы сделали в плагине Google Typography.
Шрифты повышают удобочитаемость, если их правильно использовать. Зачастую в этом помогают правильно подобранные шрифты, а также их размеры и цвета. С плагином Google Typography, все что вам остается сделать, это просто выбрать подходящий шрифт. Плагин очень удобен в использовании, тем не менее, здесь пока еще отсутствуют расширенные настройки шрифтов, включая, к примеру, высоту строки. В целом, плагин выполнен таким образом, что позволяет без труда находить и применять шрифты на сайтах, основанных на WordPress. Если вам нужно больше информации по поводу данного плагина, то посмотрите эту страницу.
