Коротко: шрифты в Тильде подключают двумя путями — готовыми настройками типографики или своим кодом (Google Fonts / @font-face). Покажем оба, а также как задать шрифт для блоков через CSS.
Способы подключения
- Выделите текстовый блок.
- Откройте «Настройки» → «Шрифт и цвет».
- Выберите шрифт и начертание.
Минус: список ограничен и настраивается для каждого блока отдельно.
Добавьте код в Настройки страницы → Дополнительно → HTML-код для head:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Затем задайте шрифт:
body, .t-text { font-family: 'Inter', sans-serif; }@font-face {
font-family: 'MyFont';
src: url('https://static.tildacdn.com/MyFont.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
body { font-family: 'MyFont', system-ui, sans-serif; }Файл загрузите в файловый менеджер Тильды и вставьте его адрес.
Практика: три задачи
1. Подключить бренд-шрифт
- Загрузите файл шрифта в файловый менеджер.
- Добавьте
@font-faceв код страницы. - Задайте
font-familyдля тела и заголовков. - Проверьте на опубликованной странице (не в редакторе).
2. Разные шрифты для заголовков и текста
h1, h2, h3 { font-family: 'Lion Display', sans-serif; }
body { font-family: 'Inter', sans-serif; }3. Ускорить загрузку шрифта
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Шрифт не применился | код не в head или опечатка | проверить подключение и имя семейства |
| Применился частично | шрифт задан у отдельных блоков | снять настройку блока/CSS |
| Шрифт «мигает» | нет font-display: swap |
добавить свойство |
| Тяжело грузится | много начертаний | подключать только нужные |
Проверьте себя
Вопросы и ответы
У части блоков свой шрифт. Снимите его в настройках блока или переопределите CSS с большей специфичностью.
Google быстрее в подключении; свой файл надёжнее (не зависите от внешнего сервиса).
Задайте правило для h1,h2,h3,h4 в общем CSS страницы/проекта.
Нет font-display: swap или шрифт грузится поздно. Помогает предзагрузка и системный фолбэк.
Итоги
- Быстро — готовые настройки типографики.
- Гибко — Google Fonts/свой файл + CSS.
- Проверяйте на опубликованной странице и следите за весом шрифтов.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.