Блог Perkova&Perkova

Не отображаются шрифты на Tilda: порядок диагностики

Когда вместо выбранного шрифта виден другой, сначала определите масштаб ошибки. Не загрузилось всё семейство, только жирное начертание, кириллица или один конкретный блок? Эти наблюдения сужают поиск. Не начинайте с добавления глобального CSS с принудительными правилами: он может замаскировать причину и изменить весь проект.

Зафиксируйте точный пример

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

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

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

  1. По руководству Tilda по шрифтам определите источник: библиотека, внешний сервис, загруженный файл или отдельный CSS.
  2. Сопоставьте выбранное семейство для заголовков и текста. У отдельного блока могут быть собственные параметры, поэтому глобальное изменение не всегда меняет всё содержание.
  3. Проверьте наличие нужного начертания и символов. Файл для латиницы не обязан содержать кириллицу; обычное начертание не заменяет корректную настройку всех используемых вариантов.
  4. Если загружаете свой шрифт, используйте предусмотренный платформой способ и поддерживаемые форматы из документации. Проверьте право на веб-использование.
  5. После исправления сохраните настройки и опубликуйте затронутые страницы. Не сравнивайте новый редактор со старой публичной версией.

Отделите загрузку от применения

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

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

Для собственной реализации поведение шрифтов описывает документация @font-face. Перенос примера требует соответствия имени семейства, файла и начертания. Адрес-заглушка из чужого кода не является работающим источником.

Проверьте временную замену

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

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

Диагностика по симптомам

  • Не работает один блок: ищите его локальные настройки и переопределения.
  • Проблема только у кириллицы: проверьте состав символов выбранного файла.
  • Нет жирного начертания: сопоставьте подключение и используемую насыщенность.
  • Текст сначала исчезает: исследуйте стратегию показа и загрузку, не добавляя декоративную задержку.
  • После CSS все блоки изменились: верните сохранённую вставку и ограничьте правило нужным компонентом.

Приёмка включает заголовки, абзацы, кнопки, ошибки формы и текст на телефоне. Сохраните исходные значения для отката. Смежные инструкции: проверка оптимизации и изоляция CSS. Для диагностики рабочего сайта передайте Perkova&Perkova адрес и пример ошибки.

Практика Tilda