Почему не отображаются шрифты?

Проблема с отображением может возникнуть, если при редактировании блока вручную назначили другой шрифт.
Поэтому в блоке сбрасываются настройки и устанавливается шрифт по умолчанию.
Подробнее о проблеме
Например, изначально в настройках сайта (раздел «Шрифты и цвета») вы установили шрифт Roboto. Затем в блоке выделили текст и в появившемся контекстном меню вручную указали этот шрифт. 
После этого в настройках сайта поменяли шрифт на Open Sans. В блоках, где шрифт не был указан вручную, текст стал отображаться новым шрифтом. Но в блоках, в которых он был задан вручную, возникает проблема. Это произошло из-за того, что предыдущий шрифт больше не подключен к сайту.
Важно: настройки, заданные вручную в контекстном меню, могут конфликтовать с другими настройками типографики
Как исправить проблему
Необходимо перейти к блоку → нажать на любое место в тексте → шрифт автоматически изменится на добавленный.
Проблемы и способы решения в зависимости от метода подключения шрифта
Шрифт подключен с помощью CSS-файла
Убедитесь, что вы указали корректное название шрифта в настройках сайта.

Название шрифта (font-family) должно совпадать с данными из CSS-файла: настройки сайта → раздел «Шрифты и цвета» → вкладка «Загрузить шрифт».
Важно: при подключении шрифта через CSS-файл нужно удостовериться, что сервер, с которого подключается шрифт, поддерживает Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *). Как установить эту настройку на сервере, указано в инструкции для подключения своего файла CSS
Шрифт подключен с помощью Google Fonts
При добавлении шрифта также важно, чтобы название шрифта в настройках сайта совпадало с названием шрифта в Google Fonts.
Помимо этого обязательно проверьте ссылку на CSS-файл Google Fonts, она должна выглядеть так:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
Шрифт загружен файлами
В первую очередь необходимо проверить указан ли шрифт в шрифтовой паре. Важно чтобы у шрифта было прописано полное официальное название, и оно совпадало с названием, добавляемого шрифта.
Если шрифт корректно отображается на латинице, но на кириллице возникают проблемы, то в первую очередь стоит проверить, поддерживает ли он кириллические символы. Эту информацию можно проверить на стороне сервиса, в котором вы приобрели шрифт. 

Также при конвертации некоторые сервисы могут портить кириллическую версию. Это можно проверить в сервисе FontDrop!. Для конвертирования рекомендуем воспользоваться WOFFer.
Шрифт добавлен из библиотеки шрифтов
Проблема с базовыми шрифтами может наблюдаться на экспортированных проектах.

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

На данный момент это шрифты:
  • Futura PT
  • Opinion Pro
  • Circe (и Circe Rounded)
  • Iskra
  • Orchidea Pro
  • Kazimir Text
  • Mediator (и Mediator Serif)
  • Reforma Grotesk

Чтобы они и другие встроенные шрифты работали на экспортированном сайте, нужно обязательно указать домен, на который вы экспортируете проект в настройках сайта → «Домен». Достаточно указать название домена, подключать его не требуется.
Шрифт долго загружается
Чтобы файл шрифта загрузился, требуется время. На скорость загрузки влияет качество используемого интернет-подключения и количество контента на странице сайта. 

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

Воспользуйтесь блоком «Эффект загрузки страницы» (Т228, категория «Другое»). Он замедлит появление контента и текст будет отображаться с загруженными шрифтами.
Если при открытии сайта в браузере вы наблюдаете «мерцание» — сначала загружается системный шрифт, потом ваш собственный — это не ошибка, а нормальное поведение.

Назначаем проекту шрифты или подключаем собственные, используя Type Kit или внешний CSS файл



Как подключить шрифты Google fonts в Тильда Паблишинг

Возможные проблемы и способы решения


Made on
Tilda