Как изменить шрифт на сайте WordPress?

2 min


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

Изменить шрифт в WordPress

Меры предосторожности перед изменением шрифта

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

  • Одно из самых важных измерений, которое вам понадобится, — это сделать резервную копию вашего сайта. Поступая так, вы предотвратите любые проблемы, с которыми вы можете столкнуться в будущем. Это особенно полезно, особенно если вы играете с CSS темы.
  • Решите, какое семейство шрифтов вы хотите использовать на своем сайте. Помимо стандартных семейств шрифтов, таких как Arial (без засечек), Times New Roman (с засечками) и т. Д. Google предлагает более 700 пользовательских шрифтов. Поэтому выберите семейство, которое хотите использовать на своем сайте.
  • Изменение шрифта может повлиять на макет сайта. Следовательно, убедитесь, что вы выбрали правильный шрифт, который подходит для вашего контента и макета.
  • Еще один шаг, который вы можете сделать, — это изменить шрифт на тестовом веб-сайте. Сделав это, вы узнаете, как выполнить эту задачу, ничего не пропуская на своем действующем сайте. Мы настоятельно рекомендуем сделать это, чтобы не вносить изменения в ваш действующий сайт, который долгое время работал с разными шрифтами.

1. Изменение шрифтов в настройках темы

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

Чтобы показать это, мы воспользуемся популярной темой «Астра».

  • Прежде всего, перейдите в раздел «Внешний вид> Настроить» на панели администратора WordPress.
  • Затем перейдите в раздел «Общие> Типография» внутри настройщика.
  • Там вы найдете два варианта: «Базовая типографика» и «Заголовки».
  • Базовая типография позволяет вам вносить изменения в тело и контент вашего сайта. Здесь вы можете изменить семейство шрифтов, размер, толщину, высоту строки и нижнее поле абзацев.
Базовая типографская тема Astra
Базовая типографская тема Astra
  • В разделе «Заголовки» вы можете изменить семейство шрифтов, размер и высоту строки для всех заголовков, которые могут быть на вашем веб-сайте, с H1 на H6.
Заголовки Типография Astra Theme
Заголовки Типография Astra Theme

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

Обратите внимание, что такие темы, как Astra и GeneratePress, позволяют вам выбрать системный шрифт для вашего сайта. Это означает, что сайт будет использовать шрифт с устройства, на котором он просматривается. Поскольку это удалит время загрузки файлов шрифтов из вашего домена, скорость загрузки вашей страницы значительно улучшится.

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

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

  • Перейдите в раздел «Плагины> Добавить новый» на панели инструментов WordPress.
  • Выполните поиск по похожему запросу, например «шрифт».
  • Вы увидите множество различных плагинов, таких как Easy Google Fonts, Fonts Plugin, Google Fonts Typography и Use Any Font и Custom Font Uploader. Выбирать лучший плагин с лучшим рейтингом и наибольшим количеством загрузок — это простой способ.
  • В этом примере мы будем использовать «Плагин шрифтов» для настройки шрифтов на вашем сайте. После того, как вы установили плагин, активируйте его, как любой другой плагин, который вы используете.
Плагин шрифтов
Плагин шрифтов
  • Плагин предлагает бесплатное руководство по быстрому запуску. Вы можете либо получить их руководство по электронной почте, либо проигнорировать руководство по настройке шрифтов самостоятельно, перейдя в раздел «Плагин шрифтов> Настройка шрифтов».
  • Это приведет вас к настройщику, где вы сможете изменить шрифт.
  • Вы можете войти в базовые настройки, чтобы изменить шрифт, или в расширенные настройки, если вы хотите изменить шрифт для разных частей вашего сайта.
Параметры плагина Fonts
Параметры плагина Fonts
  • Вы можете изменить шрифт для вашего контента, заголовков и кнопок в разделе «Основные настройки».
Основные настройки плагина Fonts
Основные настройки плагина Fonts
  • Находясь в «Расширенных настройках», вы можете более подробно изучить и изменить шрифт для брендинга, навигации, контента (здесь вы можете изменить шрифт для заголовков, заголовков и других частей вашего контента), боковой панели, нижнего колонтитула и загружать только шрифты.
Расширенные настройки плагина Fonts
Расширенные настройки плагина Fonts
  • После выбора шрифтов вы можете мгновенно просмотреть свой контент и посмотреть, как он выглядит. Если все в порядке, нажмите кнопку «Опубликовать», чтобы изменения вступили в силу на вашем действующем сайте.
  • Помимо изменения шрифта, в этом плагине есть еще несколько полезных инструментов, которые помогут вам в этом процессе. Загрузка шрифтов — одна из них; это помогает оптимизировать производительность вашего сайта, снимая отметки с любых шрифтов, которые не используются. Отладка помогает устранить любые ошибки, которые могут быть на вашем сайте в отношении шрифтов.

3. Изменение шрифта с помощью CSS

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

  • Перейдите в раздел «Внешний вид> Редактор тем» в панели администратора WordPress.
  • Вы можете игнорировать предупреждение, которое показывает WordPress, чтобы избежать редактирования файлов темы.
  • Выберите вашу активную тему; в этом примере мы будем использовать стандартную тему «двадцать двадцать».
Таблица стилей CSS
Таблица стилей CSS
  • Когда вы там окажетесь, WordPress по умолчанию откроет таблицу стилей с именем style.css. Обычно он доступен как первый файл; вам нужно для смены шрифтов на вашем сайте.
  • Добавьте приведенный ниже код, чтобы изменить шрифт для всего вашего сайта.
*{font-family:" Name of your font"}
  • Вам также нужно будет определить семейство шрифтов в верхней части style.css; вы можете сделать это, добавив эти строки. Подробнее об использовании свойства font-face Вот.
@font-face {
font-family: "Name of your font";
font-weight: 100 900; /*These will decide how thick or thin your characters will be */
font-style: normal; /*Here you can put your style as normal, italic, or oblique*/
src: url (URL from which you got the font) format("format of font");
}
  • Для изменений на уровне сайта вы также можете вставить код CSS в разделе «Внешний вид> Настройка> Дополнительные CSS».
  • Если вы хотите изменить шрифт только для раздела вашего веб-сайта, вам нужно сначала найти этот раздел. Как только вы найдете его в своем коде, вы можете добавить ту же строку или изменить существующую. Например, на изображении ниже вы увидите раздел основного текста вашего веб-сайта и какой шрифт он использует. Вы также можете изменить размер шрифта, если хотите сделать его больше или меньше.
Код CSS тела
Код CSS тела
  • После добавления или изменения кода вам нужно будет прокрутить страницу вниз и нажать кнопку «Обновить файл». Таким образом, ваш сайт должен автоматически менять шрифт.

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

Повлияет ли изменение шрифта на мое SEO?

Ответ — да, изменение шрифта повлияет на ваш рейтинг в поисковых системах, если вы не планируете и не делаете это правильно.

  • Загрузка файлов шрифтов повлияет на скорость загрузки страницы. Google PageSpeed ​​Insights и другие инструменты измерения скорости будут отображать предупреждения, когда шрифты препятствуют загрузке содержимого страницы. Чтобы этого избежать, выбирайте только необходимый вес шрифта, чтобы не загружать кучу файлов шрифтов на ваш сайт. как упоминалось выше, «Плагин шрифтов» может помочь в этом, чтобы загрузить только требуемые веса шрифта. Когда вы используете настройки темы или собственный CSS, обязательно позаботьтесь об этом.
  • Вы должны предварительно загрузить файлы шрифтов, используемые на вашем сайте, чтобы удалить ошибки запросов на предварительную загрузку в Google PageSpeed ​​Insights. Узнайте больше о том, как предварительно загрузить файлы шрифтов в WordPress.
  • Убедитесь, что у вашего сайта правильный размер и интервал. В противном случае вы увидите ошибки в Google PageSpeed, например, слишком близкие элементы и меньший размер шрифта.
  • Использование внешнего шрифта, такого как Google Fonts, увеличит время загрузки и, следовательно, замедлит ваш сайт. Вы можете использовать плагины кеширования, такие как WP Rocket, для оптимизации и объединения всех используемых вами внешних шрифтов Google.
  • Когда вы меняете шрифт, Google и другие поисковые системы будут пытаться найти предыдущие файлы шрифтов на вашем сайте. это вызовет ошибку 404, как если бы вы удалили старые шрифты. Как правило, вам не нужно устанавливать 301 редирект для отсутствующих файлов шрифтов и игнорировать их, поскольку эти ошибки не влияют на пользователей.

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


0 Comments

Ваш адрес email не будет опубликован. Обязательные поля помечены *