Как браузер загружает фирменный шрифт
HTML и CSS могут прийти раньше файла шрифта. Браузеру нужно решить, показать ли текст сразу запасным начертанием или подождать. От этой стратегии зависит, увидит человек пустое место, смену шрифта или стабильный текст с задержкой.
Форматы и начертания
Tilda позволяет загружать собственные шрифты в WOFF и WOFF2. Не переносите все девять возможных весов просто потому, что они есть в гарнитуре. Каждый файл увеличивает объем загрузки.
- для основного текста часто достаточно 400;
- для акцентов - 500 или 600;
- жирный 700 нужен только если реально используется;
- курсив - отдельный файл.
Запасной шрифт
Чем ближе запасной шрифт по ширине и высоте знаков к фирменному, тем меньше сдвиг при замене. Подбирайте fallback не только по стилю, но и по метрикам.
Мгновенное отображение текста в Tilda
В настройках шрифтов Tilda есть режим, при котором содержимое показывается запасным шрифтом до загрузки фирменного. Это ускоряет появление текста, но Tilda предупреждает о возможном мерцании и изменении размеров элементов. Описание настройки есть в справке по шрифтам.
Почему возникает CLS
Если после загрузки фирменный шрифт занимает больше или меньше места, строки переносятся иначе, а блоки ниже сдвигаются. На крупном H1 это особенно заметно. Уменьшить эффект помогает близкий fallback, разумная ширина текстового блока и отсутствие жесткой высоты контейнера.
Шрифты и Zero Block
Жестко заданная высота текстового элемента может обрезать строки после смены шрифта. На адаптиве оставляйте запас по высоте или используйте решения, где контейнер может расти по содержанию.
Внешние сервисы шрифтов
Подключение через Google Fonts, Adobe Fonts или внешний CSS добавляет сетевые запросы. Собственный локально загруженный WOFF2 часто дает больше контроля, но лицензия шрифта должна разрешать веб-использование.
Как проверить загрузку
- Откройте Network и отфильтруйте Font.
- Перезагрузите страницу без кеша.
- Посмотрите размер и время каждого файла.
- Проверьте, нет ли 404 и CORS-ошибок.
- Повторите на мобильном ограничении сети.
Рабочая стратегия
Оставьте только используемые начертания, загрузите современные форматы, выберите близкий запасной шрифт и отдельно протестируйте первый экран. Не нужно менять сильную фирменную типографику на Arial ради нескольких баллов, если проблему можно решить аккуратнее.
