Вернуться на страницу поддержки Создание сайта Изменение шрифтов вашего сайта

Изменение шрифтов вашего сайта

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

Доступность шрифтов в зависимости от тарифного плана

На сайтах с тарифными планами Premium, Business и Commerce можно выбирать из широкого спектра встроенных шрифтов, но нельзя загружать собственные пользовательские шрифты.

Чтобы загружать пользовательские шрифты и устанавливать стили шрифтов из Google Fonts, перейдите на тарифный план Business или Commerce.

Изменение шрифтов

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

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

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

  1. Откройте консоль WordPress.com.
  2. Перейдите в раздел Внешний вид → Редактор.
  3. Нажмите Стили слева или выберите значок «Стили» в виде чёрно-белого круга.
  4. Выберите опцию «Типографика».
  5. Выберите один из следующих текстовых элементов на своём сайте.
    • Текст
    • Ссылки
    • Заголовки
    • Подписи
    • Кнопки
  6. Щёлкните по выпадающему меню в разделе «Шрифт» и выберите нужный шрифт. Шрифт текста сменится на выбранный, чтобы вы могли увидеть, как это выглядит.
  7. Нажмите кнопку «Сохранить».

Эти шаги демонстрируются в видео ниже.

Стрелка указывает на кнопку «Стили» в редакторе сайта. Значок выглядит как чёрно-белый круг.
Значок «Стили»
Изменение шрифтов с помощью редактора сайта

Подробную информацию о том, как настроить внешний вид текста на веб-сайте, см. в нашем руководстве по стилям.

Применение шрифта к конкретному тексту

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

Если вам нужно выделить фрагмент текста, подумайте, как ещё можно привлечь к нему внимание, например: изменить цвет, использовать блок «Заголовок» или блок «Цитата» либо вставить изображение.

Загрузка пользовательских шрифтов

Этот раздел руководства относится к сайтам с тарифными планами WordPress.com Business и Commerce, а также с устаревшим тарифным планом Pro. Если вы приобрели тарифный план Business, не забудьте его активировать. Для бесплатных сайтов или сайтов с тарифным планом Personal и Premium необходимо приобрести платный тарифный план более высокого уровня, чтобы получить доступ к этой функции.

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

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

Вспышка нестилизованного текста

Вспышка нестилизованного текста (FOUT) — это ситуация, когда перед появлением выбранного шрифта на короткое время появляется другой шрифт. Если сайт загружается медленно из-за низкой пропускной способности сети, то сначала отображается шрифт по умолчанию для выбранной темы. Таким образом, пользователи могут начать чтение до окончания загрузки пользовательского шрифта, а не смотреть на пустую страницу. Шрифт по умолчанию может отображаться до того, как загрузится страница, однако для пользователей при замедлении соединения это всё равно удобнее, чем ждать загрузки, глядя в пустой экран.

Если вы хотите избежать подобной ситуации, вы можете добавить на сайт с соответствующим тарифным планом следующий код CSS с помощью редактора CSS в разделе Внешний вид → Настроить → Дополнительный CSS:

.wf-loading body { visibility: hidden; }

или

html:not(.wf-active) body { display: none; }

Шрифты Google и GDPR

Все запросы на обслуживание шрифтов Google, используемые в темах WordPress.com, обслуживаются через серверы WordPress.com и больше не используют сеть CDN или FDN Google. Это изменение произошло в декабре 2022 г.

Если на вашем сайте применяется пользовательский плагин или сторонняя тема, вам потребуется вместе с разработчиками плагина и (или) темы убедиться, что они не работают со шрифтами Google через сеть CDN или FDN Google. Дополнительную информацию о GDPR см. здесь.

Copied to clipboard!