Как подключить свой шрифт в Tilda через @font-face

В Tilda есть встроенные шрифты и подключение Google Fonts, но если у бренда свой шрифт (или редкая лицензионная гарнитура) — его придётся добавлять самому. Делается это через CSS-правило @font-face: вы даёте браузеру прямую ссылку на файл шрифта, и он начинает рисовать им текст. Разберём по шагам.

Что понадобится

• Файл шрифта в формате woff2 (современный, лёгкий, поддерживается всеми браузерами). Если у вас ttf или otf — его можно конвертировать в woff2 любым онлайн-конвертером шрифтов.
• Прямая ссылка на этот файл — самый важный момент, ниже о нём подробно.
• Доступ к настройкам страницы или сайта в Tilda, чтобы вставить CSS.

Шаг 1. Получите прямую ссылку на файл шрифта

Правилу @font-face нужен прямой адрес самого файла .woff2, а не ссылка на облачный диск (она ведёт на страницу просмотра, и шрифт не загрузится). Загрузите файл шрифта в LF Drive и скопируйте прямую ссылку вида https://lfdrive.ru/f/КОД.

Шаг 2. Вставьте CSS со шрифтом

Откройте настройки страницы (или сразу всего сайта, если шрифт нужен везде) и добавьте код в раздел для HTML. В Tilda это «Настройки сайта» → «Ещё» → «HTML-код для вставки внутри head», либо блок T123 на странице. Вставьте:

<style>
@font-face {
  font-family: 'MyBrandFont';
  src: url('https://lfdrive.ru/f/ВАШ_КОД') format('woff2');
  font-weight: 400;
  font-display: swap;
}
</style>

Замените ВАШ_КОД на код из ссылки, а 'MyBrandFont' — на любое название, которым будете звать шрифт дальше. font-display: swap показывает текст системным шрифтом, пока ваш грузится — так страница не «моргает» пустотой.

Если у шрифта несколько начертаний

Жирный, курсив и т. д. — это отдельные файлы. Для каждого пишут свой блок @font-face с тем же font-family, но разными ссылкой и значением font-weight:

@font-face {
  font-family: 'MyBrandFont';
  src: url('https://lfdrive.ru/f/КОД_BOLD') format('woff2');
  font-weight: 700;
  font-display: swap;
}

Шаг 3. Примените шрифт к тексту

Теперь шрифт можно назначить. Самый простой способ — задать его всему сайту в том же блоке <style>:

<style>
body, .t-text, .t-title, .t-heading {
  font-family: 'MyBrandFont', sans-serif !important;
}
</style>

Слово !important нужно, чтобы перебить стандартные стили Tilda. sans-serif в конце — запасной вариант на случай, если ваш шрифт не загрузится.

Опубликуйте страницу и проверьте — текст должен отрисоваться вашим шрифтом.