Одна из частых проблем, с которой я сталкиваюсь при работе с сайтами, заключается в том, что блогер выбирает англоязычную тему, пишет в блоге с этой темой на русском, и у него ломаются шрифты.
Выглядит это примерно так:
Видите контраст между надписями на русском и на английском? В теме по умолчанию используется некириллический шрифт Karma, и для русских букв браузер подставляет шрифт по умолчанию, который выглядит совершенно иначе. Смотрится странно, хотя я слышал мнение, что это может восприниматься как фишка сайта — ну, вот такое вот выделение латиницы.
Но обычно всё выглядит ещё хуже, чем в примере выше, и это надо исправлять.
Вопрос: как?
Ответ: выбрать кириллический шрифт и установить его для ваших текстов, заголовков и других элементов.
Как исправить поломанные шрифты в помощью плагина Easy Google Fonts
Есть два варианта: прописать всё руками в коде или же воспользоваться специальным плагином.
Грамотнее и лучше с точки зрения быстродействия прописать всё напрямую в коде. И всё же я не советую вам лезть в код как минимум по одной причине. Даже если вы понимаете в HTML и CSS, и в том, как устроен WordPress, есть жирное «но»: внесённые вами изменения исчезнут при первом же обновлении темы. Конечно, есть вариант вообще не обновляться, но это грозит проблемами с безопасностью и совместимостью, поэтому я бы его не рассматривал. Обновляться нужно, но и шрифты чинить нужно.
Поэтому изменение шрифта с помощью плагина — более безопасный способ. В своё время я перебрал несколько вариантов и остановился на плагине Easy Google Fonts, который даёт доступ к сотням бесплатных шрифтов, в том числе и кириллических, размещённых в сервисе Google Fonts.
Плагин хоть и относительно старый, но, наверное, единственный, который даёт возможность тонкой настройки шрифтов для любого элемента страницы. Есть ещё плагин Google Fonts for WordPress, в нём больше доступных шрифтов, и в целом он выглядит попроще, но за часть плюшек — например, изменение высоты шрифта — придётся заплатить покупкой pro-версии. В Easy Google Fonts все возможности доступны сразу.
Easy Google Fonts по умолчанию позволяет менять шрифты для стандартных элементов (параграф <p>, заголовки <h1>-<h6>). Если вы хотите сменить шрифт для какого-то определённого элемента страницы, то придётся занести этот элемент в базу данных плагина. Об этом — ниже.
Меняем шрифты для заголовков и параграфов с помощью Easy Google Fonts
Итак, вы установили и активировали плагин. Чтобы попасть в меню установки шрифтов, пройдите на экран настройки темы (в админке — «Внешний вид» -> «Настроить»). В боковом меню вы увидите новую вкладку «Typography».
Нажимаем на вкладку, далее нажимаем «Default Typography» и попадаем в меню выбора элемента. Допустим, мы хотим изменить основной шрифт сайта. Нажимаем кнопку «Edit Font» под надписью «Paragraphs».
Попадаем в меню редактирования шрифта. Давайте посмотрим, что здесь можно сделать:
В меню три вкладки:
- Styles — позволяет задать семейство шрифта и базовое оформление
- Appearance — позволяет задать цвет шрифта, его высоту и расстояние между буквами и строками
- Positioning — позволяет задать позиционирование.
Positioning можно задать ряд css-свойств: внутренние (padding) и внешние(margin) отступы, блочное или строковое отображение (display) и рамку (border). Если вы просто хотите починить шрифт или поменять существующий на более нравящийся вам, то, скорее всего, вкладка Positioning вам не понадобится.
Разберём две первые вкладки. К слову, как только вы что-то выбираете в меню плагина, то это же сразу отображается справа на самом сайте. Если ничего не трогаете, то оставляйте Theme Default — значение темы по умолчанию.
Styles:
(см. скрин выше)
- Script / Subset — выбираем набор шрифтов. Если вам нужен русский шрифт, то выбираем Cyrillic или Cyrillic Extended.
- Font Family — выбираем семейство шрифтов. Тут, конечно же, всё на ваш вкус. Лично мне для основного текста нравятся шрифты без засечек Open Sans, PT Sans, Ubuntu и с засечками Lora и PT Serif.
- Font Weight / Style — выбираем вариант начертания шрифта, если он есть: жирный, курсивный.
- Text Decoration — можно задать подчёркивание или надчёркивание текста.
- Text Transform — можно задать, чтобы все буквы были только строчными, только прописными или каждое слово начиналось бы с большой буквы (Capitalize)
Appearance:
- Font Color и Background Color — цвет шрифта и фона соответственно.
- Font Size — размер шрифта
- Line Height — расстояние между строками
- Line Spacing — расстояние между буквами (это лучше не трогать)
Все размеры задаются в пикселях.
В каждом пункте есть кнопка «Reset», позволяющая сбросить значение.
Настроив параграфы (основной текст), вы можете поэкспериментировать с заголовками, а затем нажмите наверху кнопку «Опубликовать», чтобы сохранить изменения.
Как поменять шрифт отдельного элемента с помощью Easy Google Fonts?
К примеру, вы хотите поменять шрифт заголовков только в сайдбаре. Плагин Easy Google Fonts позволяет это сделать.
Отмечу, что для этого варианта вам потребуется базовое понимание HTML и CSS, потому что вам понадобится узнать «селектор» нужного элемента — по сути, его имя в коде. Показывать буду на примере Firefox, но если у вас другой браузер, то, скорее всего, всё будет выглядеть примерно так же.
Находясь на сайте, кликаем правой кнопкой по нужному элементу и выбираем «Исследовать элемент». Попадаем в панель инструментов разработчика, в которой выведен код этого элемента:
Отсюда можно увидеть, что заголовок виджета в выбранной вами теме (но это не означает, что во всех темах будет так) имеет класс widget-title, и его селектор записывается как .widget-title (это класс, поэтому селектор начинается с точки).
Заходим в настройки плагина Easy Google Fonts в разделе «Плагины»:
Попадаем в меню настроек.
Вводим название элемента (например, «widget title») и нажимаем кнопку «Create Font Control», чтобы создать в базе плагина новый элемент, шрифт которого мы будем менять.
Сделав это, попадаем в форму редактирования этого элемента. Всё, что здесь нужно сделать — прописать для созданного вами элемента его селектор, который вы получили в инструментах разработчика, и нажать кнопку «Сохранить». В некоторых случаях может потребоваться поставить галочку во втором пункте — это нужно на случай, если в вашей теме стили шрифтов используются принудительно (!important) Но, скорее всего, это не понадобится.
После того, как вы сохраните элемент, он появится в меню плагина в настройках темы в пункте «Typography» -> «ThemeTypography».
Дальнейший алгоритм настройки шрифта — такой же, как и для параграфа по умолчанию.
Надеюсь, данная информация оказалась вам полезной, и с помощью плагина Easy Google Fonts вы сможете исправить или поменять свои шрифты. Если у вас появились вопросы, то буду рад ответить на них в комментариях.
Делаю красивые, современные сайты на WordPress и пишу для них тексты, интересные как читателям, так и поисковым системам. Занимаюсь блогами почти 10 лет, и считаю, что каждый человек в сети должен иметь свой личный или профессиональный сайт.
Оставить комментарий