Как изменить шрифт в Тильде: сайт и отдельный блок

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

Изменить шрифт в Тильде можно в Настройках сайта: выбранная гарнитура применяется к стандартным блокам на всех страницах, если в них нет отдельных настроек шрифта. Дальше стоит проверить, не перекрыл ли глобальную настройку какой-то блок со своим ручным шрифтом. Работаем только со встроенной библиотекой и штатными настройками — без CSS и загрузки внешних файлов.

Задайте шрифт сайта

Откройте Настройки сайта → Шрифты. Там вы увидите галерею шрифтов: её можно пролистать и задать шрифт для сайта, нажав на кнопку «Выбрать» ([1]). Шрифт, выбранный так, назначается сразу для заголовков и для текста ([1]). Это и есть глобальная настройка, которая работает по всему проекту.

Важный нюанс, который лучше знать до того, как вы начнёте править блоки вручную: глобальные параметры применяются ко всем блокам на всех страницах сайта, так поддерживается общий стиль ([1]). Глобальный размер, насыщенность и цвет заголовков и текста задаются на вкладке «Шрифты и цвета», и они действуют на стандартные блоки, если в этих блоках не установлены другие настройки шрифтов ([1]).

Если вы планируете править отдельные блоки, начните с глобального выбора: так проще увидеть, что поменялось автоматически, а что осталось прежним из-за ручной настройки.

Выберите гарнитуры заголовков и текста

Когда нужны разные шрифты для заголовков и основного текста, в разделе «Шрифты» нажмите «Расширенные настройки» ([1]). На вкладке «Библиотека» можно выбрать разные шрифты для заголовков сайта и для основного текста ([1]).

В библиотеке Тильды есть более 20 стандартных и премиум-шрифтов от партнёров, они предоставляются бесплатно при подписке на Тильду ([1]). Выберите подходящую гарнитуру из тех, которые видите в своей галерее.

Порядок такой:

  1. В Настройках сайта → Шрифты откройте «Расширенные настройки» и вкладку «Библиотека».
  2. Выберите гарнитуру для заголовков.
  3. Выберите гарнитуру для основного текста.
  4. Сохраните настройки.

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

Проверьте локальные настройки

Если текст не принял глобальную гарнитуру, проверьте, не задан ли шрифт в этом месте вручную. В описанном справкой случае после смены глобального шрифта прежний перестал подключаться к сайту, а ручная настройка осталась. Справочный центр Тильды описывает это так: если при редактировании блока вручную назначили другой шрифт, настройки в блоке сбрасываются и ставится шрифт по умолчанию ([2]). В примере из справки шрифт сначала стоял глобально, потом его вручную указали для фрагмента в блоке, а после смены глобального шрифта текст в блоках без ручной настройки обновился, а в блоках с ручной настройкой возникла проблема ([2]).

Настройки, заданные вручную в контекстном меню, могут конфликтовать с другими настройками типографики ([2]). Поэтому глобальная смена гарнитуры не отменяет ручные настройки автоматически.

Что делать по шагам:

  1. Найдите блок, где текст остался прежним. Скорее всего, именно там шрифт задан вручную.
  2. Перейдите к этому блоку и нажмите на любое место в тексте — по справке шрифт автоматически изменится на добавленный ([2]).
  3. Если после клика вид не поменялся, сбросьте настройку шрифта вручную: выберите в выпадающем меню «Очистить шрифт» или нажмите «Очистить стили» на панели редактирования ([2]).
  4. Пройдите так по всем блокам, где гарнитура не обновилась.

Проверять блоки стоит и в настройках блока → «Типографика»: по справке параметры шрифта в стандартных блоках задаются либо там, либо выделением текста в редакторе через верхнюю панель настроек шрифта ([1]). Если блок остался со старым шрифтом, проверьте оба места.

Учебный пример смены шрифта

Учебный пример. Возьмём учебный сайт «Курс» и ограничимся встроенной библиотекой Тильды — без CSS и загрузки внешних файлов. Задача: одна гарнитура для заголовков, одна для основного текста, и разобраться с одним блоком, где шрифт когда-то задали вручную.

Исходные условия:

Область Что было до работы Что планируем
Заголовки сайта
гарнитура, выбранная при первом запуске
новая гарнитура из встроенной библиотеки
Основной текст
гарнитура, выбранная при первом запуске
новая гарнитура из встроенной библиотеки
Блок с текстом «О курсе»
шрифт задан вручную раньше
вернуть к глобальной настройке

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

Что делаем и что ожидаем увидеть:

Область Настройка Ожидаемый вид Как проверить
Заголовки сайта
Настройки сайта → Шрифты → «Расширенные настройки» → «Библиотека» → выбрать гарнитуру для заголовков
Все заголовки стандартных блоков показывают новую гарнитуру
Открыть несколько разных стандартных блоков и сверить вид заголовков
Основной текст
там же → выбрать гарнитуру для основного текста
Текст в стандартных блоках без ручной настройки показывает новую гарнитуру
Сверить абзацы в нескольких блоках, где шрифт не задавали вручную
Блок «О курсе»
нажать на текст в блоке, затем при необходимости «Очистить шрифт» / «Очистить стили»
Текст в блоке показывает глобальную гарнитуру, а не прежнюю ручную
Сравнить блок «О курсе» с соседним блоком без ручной настройки

Проверка результата после публикации: обновите страницу и пройдите по ней в браузере. Убедитесь, что заголовки и текст в стандартных блоках показывают новые гарнитуры, а блок «О курсе» больше не выделяется прежним шрифтом. Если при загрузке вы видите системный шрифт, который потом сменяется выбранным, — это не ошибка, а нормальное поведение ([2]).

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

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

Источники

  1. Настройка шрифтов Tildahelp-ru.tilda.cc
  2. Почему не отображаются шрифты Tildahelp-ru.tilda.cc

Валерий Курземнек

Автор метода «Машиночитаемый маркетинг»

Что ещё почитать