Свой шрифт в Тильде подключаю в трёх ситуациях: у клиента есть брендбук с конкретной гарнитурой, макет в Figma собран не на шрифте из стандартной библиотеки редактора, или фирменный шрифт нужен не только в заголовках, но и в кнопках, форме и меню, куда редактор его сам не ставит. Разбираю оба рабочих способа: встроенный загрузчик шрифтов в настройках сайта и ручное подключение через CSS для случаев, которые редактор не закрывает.
По теме статьи
Готовое решение
Массовое изменение цен в каталоге Tilda
Скрипт поднимает или снижает цены товаров и вариантов в каталоге Tilda на заданный процент. Сначала показывает таблицу «было / станет», меняет только после подтверждения.
от1 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Где в Тильде включить загрузку своего шрифта
Открываю настройки сайта (иконка шестерёнки в левой панели редактора), перехожу на вкладку «Шрифты» и нажимаю «Добавить шрифт». В открывшемся окне загружаю файл гарнитуры, указываю название, начертание (обычный, курсив) и жирность. Если у бренда несколько начертаний - regular, bold, italic - каждое заливаю отдельным файлом и объединяю под одним именем шрифта, чтобы в текстовых блоках они переключались через обычные кнопки «жирный» и «курсив», а не через отдельные пункты в списке.
После сохранения шрифт появляется в выпадающем списке шрифтов у любого текстового блока, кнопки, поля формы и пункта меню без правки кода. Функция работает на платных тарифах Тильды, на бесплатном пробном периоде вкладки «Шрифты» в настройках нет.
Какие форматы шрифта примет загрузчик
Загрузчик принимает только woff и woff2. Справка прямо пишет: если шрифт есть в формате EOT или TTF, его нужно конвертировать в WOFF через онлайн-конвертер. Основной набор начертаний заливаю в woff, а файлы woff2 добавляю по отдельной ссылке «Загрузить файлы в формате .woff2»: этот формат легче и подключается у браузеров, которые его поддерживают, поэтому вендор советует использовать его в связке с woff. Если у дизайнера или в брендбуке есть только ttf или otf, конвертирую файлы до загрузки, иначе загрузчик их не примет.
Для каждого начертания - regular, medium, bold, black - нужен отдельный файл. Экономить и заливать одно начертание, а остальные дорисовывать псевдожирным через CSS, не стоит: браузер исказит пропорции букв, и на кириллице это особенно заметно на плотных гарнитурах.
Лицензия на шрифт: что проверить перед загрузкой
Перед тем как заливать шрифт в Тильду, смотрю не в файл, а в лицензию, по которой этот шрифт получен. Большинство платных гарнитур продаются отдельно для десктопной установки и отдельно для встраивания на сайт (веб-лицензия, webfont license). Файл, купленный для использования в Photoshop или Figma, по условиям многих фаундеров нельзя просто выгрузить и залить на сайт: это два разных права использования, и веб-лицензия часто продаётся отдельно и с ограничением по числу просмотров страниц в месяц.
Бесплатные шрифты чаще распространяются по лицензии SIL Open Font License, она явно разрешает встраивание на сайты, конвертацию в woff2 и модификацию файла. Но и здесь читаю текст лицензии целиком: часть бесплатных гарнитур ограничивает использование в логотипах или в коммерческих продуктах.
Отдельно проверяю кириллицу. Многие зарубежные шрифты, особенно из бесплатных подборок, поддерживают только латиницу либо добавляют кириллицу как отдельный, менее проработанный набор глифов. Перед загрузкой набираю тестовую строку на русском в любом просмотрщике шрифтов и смотрю, не вылезают ли квадраты или урезанные буквы «ё», «щ», «ъ».
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Кастомный CSS и @font-face, когда встроенного загрузчика мало
Встроенного загрузчика хватает для большинства задач: залил файл, выбрал шрифт в блоке, готово. Ручное подключение через @font-face нужно там, где шрифт должен примениться к элементу, которого нет в списке шрифтов редактора, например к подписи внутри Zero Block. Две задачи, под которые к нему тянутся чаще всего, закрываются штатно: показ текста до загрузки шрифта включается в настройках сайта → Шрифты и цвета → Продвинутые настройки, там есть настройка показа системного шрифта при загрузке, а вариативный шрифт грузится тем же загрузчиком по ссылке «Загрузить вариативный шрифт» на странице загрузки шрифтов.
Файл шрифта в этом случае заливаю как обычный файл в Тильде через поле загрузки в любом блоке или в Zero Block и забираю прямую ссылку на него, либо кладу файл на внешний CDN. Дальше в настройках сайта, на вкладке «Ещё» → «Вставить код», в поле для кода перед тегом head, добавляю правило:
@font-face {
font-family: 'BrandFont';
src: url('https://static.example.ru/fonts/brandfont.woff2') format('woff2'),
url('https://static.example.ru/fonts/brandfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}После этого шрифт с именем BrandFont доступен для использования в кастомном CSS любого блока Zero Block или в T123-блоке с HTML-кодом:
.t-name.js-product-title {
font-family: 'BrandFont', Arial, sans-serif;
}Так подключаю шрифт туда, куда встроенный редактор не дотягивается: подписи внутри слайдера, кастомные кнопки корзины, элементы, собранные вручную в Zero Block.
| Критерий | Встроенный загрузчик шрифтов | @font-face в кастомном CSS |
|---|---|---|
| Где хранится файл | На сервере Тильды, привязан к сайту | На внешнем хостинге или CDN, либо в файлах Тильды по прямой ссылке |
| Где доступен шрифт | В выпадающем списке любого текстового блока, кнопки, меню, формы | Только там, где явно прописан в CSS: конкретный класс, блок, псевдоэлемент |
| Нужен ли код | Нет, всё через интерфейс настроек | Да, правило @font-face и указание font-family в CSS блока |
| Контроль над загрузкой | Ограничен тем, что даёт редактор | Полный: font-display, порядок форматов, предзагрузка через preload |
Частые ошибки при подключении своего шрифта в Тильде
- Залит файл без кириллических глифов - русский текст молча откатывается на системный шрифт, а проверить это можно только тестовой строкой на кириллице до публикации.
- Один файл на все начертания - жирный и курсивный вариант браузер дорисовывает программно, буквы «плывут», особенно заметно на подписях к товарам и в шапке сайта.
- Попытка залить ttf или otf - загрузчик принимает только woff и woff2, файл нужно сконвертировать до загрузки.
- Шрифт подключён через CSS в стилях одного блока Zero Block, а нужен на всём сайте - тогда правило @font-face дублируют в общем коде head, а не в настройках конкретного блока.
- После замены шрифта в кеше браузера или в кеше сайта остаётся старый файл - помогает жёсткое обновление страницы и повторная публикация сайта в редакторе.
- Куплена только десктопная лицензия, а шрифт уже стоит на боевом сайте - это нарушение условий лицензии, а не техническая недоработка, и обычно вскрывается при проверке правообладателем.
Сколько стоит подключить свой шрифт в Тильде под ключ
Если задача разовая: залить шрифт, настроить начертания и убедиться, что кириллица не съезжает, это укладывается в стоимость простой доработки. Кастомный скрипт для Tilda (простая доработка) стоит от 3 000 ₽, сюда входит проверка лицензии на право веб-встраивания, конвертация файлов в woff2 и настройка @font-face там, где встроенный загрузчик не дотягивается.
Если шрифт подключаю не отдельной правкой на готовом сайте, а в рамках новой вёрстки, оценка идёт в общую разработку сайта на Тильде: там типографика, включая свой шрифт для заголовков, кнопок и форм, закладывается в макет сразу, без доплаты за отдельную правку задним числом.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли использовать шрифт с Google Fonts как свой в Тильде?
Шрифты из Google Fonts уже есть в стандартной библиотеке редактора Тильды, отдельно грузить их не нужно. Через загрузчик своих шрифтов имеет смысл заливать шрифт из Google Fonts только если нужна гарнитура или насыщенность, которых нет в стандартном списке блока: тогда скачиваю файлы с сайта Google Fonts (лицензия SIL Open Font License разрешает веб-встраивание) и заливаю как обычный кастомный шрифт.
Что будет, если в шрифте нет кириллицы?
Русский текст в блоке молча откатится на дефолтный системный шрифт браузера, без ошибки и без предупреждения в редакторе Тильды. Проверяю это до загрузки: открываю файл шрифта в любом просмотрщике и набираю тестовую строку на русском, включая «ё», «й» и твёрдый знак.
Почему шрифт не применяется после подключения через CSS?
Чаще всего три причины: правило @font-face не попало в код перед тегом head и осталось только в стилях одного блока, имя font-family в CSS блока не совпадает буквально с тем, что указано в @font-face, или браузер отдаёт закешированную версию страницы. После правки кода публикую сайт заново и обновляю страницу с очисткой кеша.
Нужно ли покупать лицензию заново, если сайт на Тильде переезжает на новый домен?
Зависит от условий конкретной лицензии: у части правообладателей веб-лицензия привязана к домену или к числу просмотров в месяц, у части действует на любое число проектов автора. Это прописано в EULA, который выдаётся вместе с файлом шрифта при покупке, и его стоит перечитать перед переносом сайта, а не полагаться на то, что лицензия одна на все случаи.