Как добавить свой шрифт на сайт Tilda через @font-face: где взять прямую ссылку на файл шрифта, готовый CSS-код и куда его вставить. Без платного тарифа Tilda.
В Tilda есть встроенные шрифты и подключение Google Fonts, но если у бренда свой шрифт (или редкая лицензионная гарнитура) — его придётся добавлять самому. Делается это через CSS-правило @font-face: вы даёте браузеру прямую ссылку на файл шрифта, и он начинает рисовать им текст. Разберём по шагам.
Что понадобится
- Файл шрифта в формате woff2 (современный, лёгкий, поддерживается всеми браузерами). Если у вас ttf или otf — его можно конвертировать в woff2 любым онлайн-конвертером шрифтов.
- Прямая ссылка на этот файл — самый важный момент, ниже о нём подробно.
- Доступ к настройкам страницы или сайта в Tilda, чтобы вставить CSS.
Право использовать шрифт на сайте — на вашей стороне. Убедитесь, что лицензия гарнитуры разрешает веб-встраивание (web-лицензия). Это юридический, а не технический вопрос.
Шаг 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 в конце — запасной вариант на случай, если ваш шрифт не загрузится.
Опубликуйте страницу и проверьте — текст должен отрисоваться вашим шрифтом.
Где хранить файл шрифта
Чтобы ссылка на шрифт была постоянной и текст не «слетел» на системный — держите woff2 в LF Drive. Загрузили — получили прямую ссылку для @font-face. Есть бесплатный тариф, чтобы попробовать.
Частые вопросы
Шрифт не применяется — что не так?
Чаще всего две причины: ссылка ведёт не на сам файл (а на страницу облачного диска), либо стили Tilda перебивают ваши. Проверьте прямую ссылку и добавьте !important в правило с font-family.
Какой формат шрифта использовать?
woff2 — он самый лёгкий и поддерживается во всех современных браузерах. Для веба этого достаточно; ttf/otf лучше конвертировать в woff2.
Нужен ли CORS для шрифта с другого домена?
Для шрифтов браузеры требуют корректные CORS-заголовки. LF Drive отдаёт файлы с нужными заголовками, поэтому шрифт грузится с поддомена/домена сервиса без донастройки.