Какие форматы использовать
Tilda поддерживает загрузку WOFF и WOFF2. WOFF2 обычно легче, поэтому его стоит добавлять вместе с WOFF как современный вариант. Подробная инструкция есть в справке Tilda.
Не загружайте все начертания автоматически
Если в проекте используются Regular 400, Medium 500 и Bold 700, нет смысла добавлять девять толщин. Каждый лишний файл увеличивает набор ресурсов.
Проверьте название font-family
Название в настройках Tilda должно совпадать с подключенным семейством. Ошибка приводит к откату на системный шрифт или неожиданной подмене.
Кириллица
Перед покупкой или подключением убедитесь, что выбранное начертание содержит кириллицу. У некоторых семейств разные файлы или наборы символов.
Шрифт через внешний CSS
Если файлы хранятся на собственном сервере, нужны корректные CORS-заголовки. Tilda отдельно описывает это в инструкции по подключению CSS-файла.
Как не ухудшить скорость
- оставить только используемые толщины;
- добавить WOFF2;
- не подключать одинаковый шрифт несколькими способами;
- проверить размер каждого файла;
- избегать десятков вариаций ради редких декоративных элементов.
Контроль на реальном сайте
- проверьте размер каждого файла WOFF/WOFF2;
- удалите неиспользуемые толщины;
- сверьте font-family в настройках и файлах;
- проверьте кириллицу на всех начертаниях;
- убедитесь, что шрифт не подключен одновременно через несколько источников;
Для большинства корпоративных сайтов достаточно двух-трех насыщенностей на семейство. Дополнительное начертание стоит подключать только после появления реального элемента, который его использует.
Как выглядит неправильная реализация
Частая ошибка - купить семейство и загрузить все девять начертаний на всякий случай. Пользователь затем скачивает ресурсы, которые на странице никогда не применяются.
Главное ограничение - число файлов, а не только формат
Даже хорошо сжатый шрифт становится тяжелым, если проект подключает шесть начертаний, курсивы и отдельные семейства для декоративных элементов. Для большинства сайтов достаточно двух-трех реально используемых начертаний. Остальные лучше не загружать на всякий случай.
Tilda позволяет настроить собственные шрифты и режим отображения системного шрифта до загрузки фирменного. Это ускоряет появление текста, но может вызвать заметную смену метрик и короткое мерцание. Официальная настройка описана в справке Tilda по шрифтам.
Как уменьшить визуальный скачок
Подбирайте системный fallback с близкими пропорциями, не используйте слишком экзотические фирменные начертания в длинном тексте и проверяйте первый экран на медленной сети. Если шрифт сначала один, а затем другой, это отдельный сценарий, разобранный в статье про смену шрифта при загрузке. Для общего влияния на скорость смотрите шрифты на Tilda и CLS и другие показатели.
Сократите семейство до реально используемых начертаний
Если дизайн использует Regular, Medium и Bold, загрузка восьми начертаний создает лишний сетевой вес. Отдельно проверьте кириллицу: собственный файл должен содержать нужный набор символов, иначе браузер начнет подмешивать запасной шрифт.
Для современных браузеров обычно выгоден WOFF2. После подключения проверьте первый визит с пустым кэшем и убедитесь, что текст появляется без заметного скачка размеров.
Проверьте запасной шрифт
Даже при быстрой загрузке фирменного файла браузер может на короткое время показать системный шрифт. Чем сильнее отличаются пропорции символов, тем заметнее скачок строк. Подберите запасной вариант с близкой шириной и высотой знаков, затем проверьте первый визит с пустым кэшем.
Какой набор шрифтов считать оптимальным
Правильная загрузка шрифтов на Tilda - это минимальный набор файлов для реальной типографики проекта. Чем проще система начертаний, тем стабильнее загрузка.
