Платформа Tilda предоставляет встроенную библиотеку из более чем 40 системных и Google-шрифтов, однако в ряде случаев этого недостаточно. Для проектирования айдентики, соответствующей бренду, или повышения читабельности на конкретных устройствах может потребоваться загрузка кастомного шрифта.
Для подключения собственного шрифта необходимо использовать формат .woff или .woff2. Они поддерживаются всеми современными браузерами и оптимизированы для быстрой загрузки. Форматы .ttf и .otf могут быть добавлены, но их использование не рекомендуется из-за большего веса и несовместимости с отдельными платформами.
Загрузка шрифта осуществляется через меню Site Settings → Fonts → Upload Font. После загрузки Tilda автоматически создаёт CSS-селектор, который можно применить через Zero Block или глобальные настройки стилей. Важно задать font-weight и font-style вручную, особенно если используется несколько начертаний одного семейства.
Если шрифт размещается на стороннем сервере, его подключение производится через блок HTML с использованием директивы @font-face. Необходимо убедиться, что у сервера включён заголовок CORS, иначе шрифт не отобразится на сайте. Такой подход требует более глубокой настройки, но позволяет использовать удалённые шрифтовые хранилища или CDN.
Загрузка собственного шрифта в настройки проекта
Для загрузки шрифта откройте настройки проекта в Tilda и перейдите в раздел «Шрифты». Нажмите «Добавить шрифт» в блоке Custom Fonts.
Поддерживаются форматы WOFF, WOFF2, TTF и OTF. Рекомендуется использовать WOFF2 – он обеспечивает минимальный вес и быструю загрузку. Максимальный размер файла – 2 МБ.
Укажите имя шрифта точно так, как оно должно отображаться в списке при выборе в редакторе. Избегайте пробелов и специальных символов в названии файла, иначе возможны ошибки при подключении.
После загрузки обязательно задайте стиль (например, Regular, Bold, Italic) и выберите к каким элементам применять шрифт: заголовки, основной текст или кастомные блоки через CSS-классы.
Изменения вступают в силу сразу после сохранения. Проверьте отображение на опубликованной странице, так как в редакторе могут использоваться системные шрифты для ускорения работы интерфейса.
Поддерживаемые форматы шрифтов и требования к ним
Платформа Tilda поддерживает загрузку пользовательских шрифтов в форматах .WOFF, .WOFF2, .TTF и .OTF. При этом рекомендуется использовать .WOFF или .WOFF2, так как они обеспечивают оптимальное сжатие и быструю загрузку на всех современных браузерах.
Файл шрифта не должен превышать 2 МБ. Для минимизации времени загрузки страницы оптимально использовать файлы до 500 КБ. Перед загрузкой необходимо удалить из файла лишние символы и языковые наборы, используя инструменты вроде Font Subsetter.
Названия файлов не должны содержать пробелов, кириллических символов и спецсимволов. Разрешены только латинские буквы, цифры, дефисы и нижние подчёркивания. Пример допустимого имени: OpenSans-Regular.woff2.
Файл шрифта должен корректно открываться в системе – если при локальном просмотре наблюдаются артефакты или проблемы с рендерингом, загружать такой файл не следует. Поддержка ретина-дисплеев достигается за счёт высокой чёткости .WOFF2-файлов, особенно при использовании hinting-настроек при экспорте из редакторов, таких как FontForge или Glyphs.
После загрузки шрифта важно проверить его отображение на всех ключевых устройствах и браузерах: Chrome, Safari, Firefox, Edge – как в десктопной, так и в мобильной версии. Некорректно отображающиеся форматы следует заменить на совместимые .WOFF или .WOFF2.
Применение загруженного шрифта к заголовкам и текстам
После загрузки кастомного шрифта в раздел «Шрифты сайта» Tilda, открой настройки блока с текстом или заголовком. В панели справа нажми на поле «Шрифт» и выбери загруженный вариант из выпадающего списка. Если шрифт не отображается, проверь, что он активирован в глобальных настройках сайта: «Настройки → Шрифты и цвета».
Для изменения шрифта во всём проекте открой «Настройки сайта → Шрифты и цвета». В секции «Заголовки» и «Основной текст» выбери нужный шрифт отдельно для каждого элемента. Убедись, что формат загружаемого файла – .woff или .woff2. Tilda не поддерживает .ttf и .otf для пользовательских шрифтов.
Если используется Zero-блок, выдели нужный текстовый элемент, нажми иконку шрифта в верхней панели и выбери кастомный шрифт. Для одновременного применения к нескольким элементам используй группировку и задай параметры один раз.
Изменения вступают в силу сразу, но на опубликованном сайте могут кэшироваться браузером. Очисти кэш или открой страницу в режиме инкогнито для проверки результата. Для корректного отображения на мобильных убедись, что размер шрифта адаптирован под разные разрешения в настройках адаптивности блока.
Настройка шрифта через Zero Block
Откройте нужный Zero Block и выберите элемент текста (текстовый блок, кнопку, заголовок). В правой панели параметров нажмите на вкладку Typography.
В поле Font Family выберите один из подключённых шрифтов. Если вы добавили кастомный шрифт через настройки сайта (Меню → Шрифты и цвета → Добавить шрифт), он появится в списке автоматически.
Для точной настройки используйте поля Font Size, Line Height и Letter Spacing. Значения вводятся вручную или регулируются с помощью стрелок. Например, для заголовков рекомендуются размеры от 36px, межстрочный интервал – от 110%.
Шрифт можно применить к разным состояниям текста (normal, hover, pressed) с помощью вкладки States вверху панели. Это особенно важно для интерактивных элементов – кнопок и ссылок.
Чтобы сохранить стиль для повторного использования, создайте пресет. Нажмите на кнопку Create Preset рядом с названием шрифта, задайте параметры и сохраните. Пресет отобразится в списке стилей и ускорит работу с другими блоками.
Все изменения применяются в реальном времени. Для контроля отображения на разных устройствах переключитесь на режимы Desktop, Tablet и Mobile в нижней панели.
Использование шрифтов из Adobe Fonts (Typekit)
Для подключения шрифтов из Adobe Fonts (ранее Typekit) в Tilda, необходимо выполнить ряд точных действий. Tilda не поддерживает автоматическую интеграцию с Adobe Fonts, поэтому используется метод внедрения через код.
- Авторизуйтесь в Adobe Fonts и создайте веб-проект.
- Добавьте нужные шрифты в проект и скопируйте сгенерированный код подключения – тег
<script>вида:
<script src="https://use.typekit.net/xxxxxxx.js"></script> - После тега скрипта Adobe Fonts также добавьте вызов функции
Typekit.load():<script>try{Typekit.load({ async: true });}catch(e){}</script> - Откройте настройки сайта в Tilda: Site Settings → More → HTML Code.
- Вставьте оба кода (скрипт и вызов
Typekit.load()) в поле Header. - Сохраните изменения.
После подключения шрифтов, их необходимо применять через CSS. Это делается вручную через блок T123 “Zero Block” или другие HTML-блоки.
- Перейдите в Zero Block → выберите текстовый элемент.
- Откройте вкладку Settings → Custom CSS.
- Укажите название шрифта точно так, как оно задано в Adobe Fonts. Пример:
font-family: "your-font-name", sans-serif;
Названия шрифтов должны совпадать с теми, что указаны в интерфейсе Adobe Fonts. Ошибка в имени приведёт к возврату к шрифтам по умолчанию.
Кеширование может задерживать отображение шрифта. Для проверки рекомендуется использовать режим инкогнито или очистку кеша браузера.
Решение проблем с отображением кастомных шрифтов
1. Проверка форматов шрифтов. Tilda поддерживает только форматы WOFF и WOFF2 для кастомных шрифтов. Формат TTF может не отображаться корректно в некоторых браузерах. Использование WOFF и WOFF2 гарантирует совместимость и улучшенную производительность загрузки шрифта.
2. Загрузка шрифтов через внешние ресурсы. Если вы подключаете шрифты через внешние сервисы, такие как Google Fonts или Typekit, важно убедиться, что URL-адрес шрифта указан правильно. Иногда ошибка может возникнуть из-за неправильной ссылки или неподдерживаемого формата.
3. Проблемы с кэшированием. Браузеры часто кэшируют шрифты, что может привести к их старой версии, даже если вы заменили файл на сервере. Чтобы устранить эту проблему, можно добавить уникальный параметр версии в URL шрифта (например, `font.woff?v=2`). Это заставит браузер загружать новую версию шрифта.
4. Проблемы с кодировкой шрифтов. При загрузке кастомных шрифтов важно использовать правильную кодировку файлов. Неправильная кодировка может привести к тому, что шрифт будет отображаться как набор искажённых символов. Убедитесь, что файлы шрифтов загружены без ошибок и правильно кодируются на сервере.
5. Настройки CSS. Проверьте, что шрифт указан в CSS с правильным названием, которое соответствует тому, как он был загружен. Ошибки в названии шрифта или его семейства приведут к тому, что вместо кастомного шрифта будет использован стандартный шрифт.
6. Скорость загрузки шрифтов. Использование слишком больших файлов шрифтов может замедлить загрузку страницы, что, в свою очередь, может вызвать проблемы с их отображением. Для оптимизации можно использовать только необходимые стили и начертания, избегая загрузки лишних вариантов шрифтов.
7. Политика безопасности браузера (CORS). Некоторые браузеры могут блокировать загрузку шрифтов с внешних серверов из-за политики безопасности. Для этого необходимо настроить правильные заголовки CORS на сервере, чтобы разрешить доступ к файлам шрифтов с других доменов.
8. Fallback-шрифты. На случай, если кастомный шрифт не загрузится, рекомендуется указать список запасных шрифтов в CSS. Это поможет избежать отображения дефолтных шрифтов, а вместо них использовать схожие по стилю.
Вопрос-ответ:
Как добавить шрифты на сайт, созданный на Tilda?
Чтобы подключить шрифт к сайту на Tilda, нужно воспользоваться встроенным функционалом платформы. Для этого зайдите в раздел «Настройки» вашего проекта, затем выберите «Шрифты». Там можно выбрать стандартные шрифты, а также добавить пользовательский шрифт, загрузив его файлы в формате .woff или .woff2. Также можно использовать ссылки на шрифты с таких сервисов, как Google Fonts. После этого шрифт будет доступен для использования в блоках и элементах сайта.
Можно ли использовать шрифты из Google Fonts в Tilda?
Да, Tilda позволяет подключать шрифты из Google Fonts. Для этого нужно открыть раздел «Шрифты» в настройках сайта, выбрать нужный шрифт из каталога Google Fonts и применить его к текстовым блокам на сайте. Шрифты Google Fonts загружаются автоматически, и вам не нужно вручную скачивать и загружать файлы шрифтов. Также можно настроить отображение шрифта для разных устройств, чтобы обеспечить хорошую читаемость на мобильных и десктопных версиях.
Какие форматы шрифтов поддерживает Tilda?
На платформе Tilda поддерживаются несколько форматов шрифтов, включая .woff и .woff2, которые оптимизированы для веб-использования. Эти форматы обеспечивают хорошую скорость загрузки и совместимость с большинством браузеров. Вы также можете загружать шрифты в других популярных форматах, но именно .woff и .woff2 считаются наиболее подходящими для веб-сайтов. Чтобы добавить шрифт, нужно загрузить его в нужном формате через раздел «Шрифты» в настройках сайта.
Что делать, если шрифт не отображается на сайте после подключения?
Если шрифт не отображается на сайте после подключения, проверьте несколько моментов. Во-первых, убедитесь, что вы правильно загрузили шрифт в нужном формате (например, .woff или .woff2). Во-вторых, проверьте, не стоит ли для шрифта неправильный CSS стиль, который может мешать его отображению. Также стоит убедиться, что URL шрифта (если вы подключаете его с внешнего ресурса) правильный и не заблокирован. Если проблема сохраняется, попробуйте очистить кэш браузера и проверить, отображается ли шрифт на других устройствах.
Загрузка...
