Шрифт на Тильде решает больше, чем кажется на старте проекта: он задаёт настроение сайта раньше, чем человек прочитает первую строку текста, и от того, как он подключён, зависит скорость загрузки и то, не поедет ли верстка при обновлении блока. На практике сталкивался с сайтами, где шрифт подключили красиво, а кириллица в нём просто отсутствовала, и вместо аккуратного заголовка на экране был текст в дефолтном системном шрифте. Разберу все рабочие способы подключения и на что смотреть, чтобы так не вышло.
По теме статьи
Готовое решение
Массовое изменение цен в каталоге Tilda
Скрипт поднимает или снижает цены товаров и вариантов в каталоге Tilda на заданный процент. Сначала показывает таблицу «было / станет», меняет только после подтверждения.
от1 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Как подключить шрифт в Тильде из встроенной библиотеки
Самый быстрый путь: в настройках сайта открываю раздел «Шрифты» и выбираю нужный из библиотеки Tilda Fonts. Там несколько сотен шрифтов, разбитых по категориям вроде «Гротески», «Рукописные», «С засечками». Выбранный шрифт сразу становится доступен в выпадающем списке для всех текстовых блоков сайта: заголовков, параграфов, кнопок.
У библиотечных шрифтов Тильда сама подгружает нужные форматы файлов и веса, дополнительный код не нужен. Это разумный вариант для большинства коммерческих сайтов: не нужно думать о хостинге файлов шрифта и совместимости с браузерами, всё уже настроено на стороне платформы.
Минус один: выбор ограничен тем, что есть в библиотеке. Если бренд-бук клиента требует конкретный фирменный шрифт, которого там нет, идём дальше.
Подключение Google Fonts и других веб-шрифтов через код в head
Если нужного шрифта нет в библиотеке, подключаю его как внешний веб-шрифт через код, вставленный в head сайта (настройки сайта, вкладка с дополнительным кодом). Для Google Fonts это выглядит так:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Здесь есть нюанс, о котором часто забывают: после вставки такого кода шрифт физически загружен в браузере, но в выпадающем списке шрифтов текстового блока Тильды он не появится. Этот список показывает только шрифты из библиотеки и загруженные через раздел «Мои шрифты». Чтобы применить внешний шрифт к тексту, дописываю font-family через дополнительный CSS у конкретного блока или через отдельный код в head с точным селектором класса блока. Способ рабочий, но требует аккуратности с CSS-селекторами, иначе шрифт применится не туда или не применится вовсе.
Тем же способом подключаются шрифты с других сервисов веб-шрифтов, если у них есть готовая ссылка на CSS-файл или код для вставки.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Загрузка своего файла шрифта на Тильде
Если у клиента есть готовый файл фирменного шрифта (обычно OTF или TTF, иногда сразу WOFF), в настройках сайта, в разделе «Шрифты», есть отдельная вкладка для загрузки своего шрифта. Загружаю туда файлы нужных начертаний, Тильда готовит из них веб-форматы и добавляет шрифт в общий список, доступный для блоков, точно так же, как библиотечные.
Этот способ удобнее кода в head тем, что не нужно вручную прописывать font-family через CSS: шрифт сразу можно выбрать в интерфейсе для заголовка, текста или кнопки. Единственное, за чем слежу отдельно, это лицензия на шрифт: не любой файл, который клиент прислал по почте, можно легально использовать на коммерческом сайте, у части шрифтов лицензия ограничивает встраивание в веб.
| Способ подключения | Откуда шрифт | Нужен код в head | Кириллица |
|---|---|---|---|
| Библиотека Tilda Fonts | встроенная библиотека платформы | нет | есть у большинства, но не у всех |
| Свой файл шрифта | файл клиента или купленная лицензия | нет | зависит от файла |
| Google Fonts и аналоги | внешний сервис веб-шрифтов | да, плюс CSS для применения | зависит от конкретного шрифта |
Начертания: жирность, курсив и что будет, если в файле их нет
Когда шрифт подключён, в настройках текстового блока появляется выбор начертания: обычно Regular, Bold, иногда Light, Medium, Italic. Список зависит от того, сколько файлов начертаний реально подключено. Если для шрифта загружен только один файл Regular, а в блоке стоит жирный текст, браузер сделает псевдо-жирное начертание программно, растянув штрихи букв. Выглядит это заметно хуже настоящего Bold-начертания, особенно на заголовках крупным кеглем.
Поэтому при загрузке своего шрифта стараюсь сразу подключать все нужные по макету начертания: обычно хватает Regular и Bold для текста и отдельно Bold или Black для заголовков. Вариативные шрифты, где один файл содержит диапазон весов от тонкого до жирного, тоже можно загрузить, но в блоках Тильды они всё равно раскладываются на фиксированные пункты веса, а не показываются плавным слайдером.
Курсив стоит проверять отдельно: часто в файле шрифта курсивное начертание нарисовано только для латиницы, а кириллические буквы в курсиве превращаются в наклонную имитацию прямого начертания. На заголовках это не критично, а вот в акцентных цитатах бросается в глаза.
Кириллица в шрифтах: как проверить перед подключением
Это главная причина, по которой шрифт, красиво смотревшийся в портфолио дизайнера, разваливается на реальном сайте. Иностранные декоративные и рукописные шрифты часто рисуются только под латиницу, кириллических глифов в файле физически нет. Браузер в таком случае подставляет системный шрифт для русского текста, и заголовок на кириллице визуально не имеет ничего общего с латинским вариантом того же шрифта.
Перед тем как ставить шрифт в макет, открываю его в любом сервисе просмотра шрифтов и печатаю тестовую фразу на русском, включая буквы Ё, Й, Ъ, которые часто забывают при рисовании кириллицы даже в шрифтах, где остальные буквы есть. Если кириллицы нет совсем, ищу аналог с похожим начертанием, у которого русские буквы нарисованы, либо obsuждаю с клиентом дополнительный набор глифов у автора шрифта, если такая опция продаётся.
В библиотеке Tilda Fonts у подавляющего большинства шрифтов кириллица уже включена, разработчики платформы стараются подбирать шрифты с поддержкой русского языка. Но рукописные и максимально декоративные варианты стоит проверять точно так же, как и внешние шрифты, потому что исключения встречаются.
Скорость загрузки шрифтов и типографика
Каждый дополнительный файл шрифта, каждое лишнее начертание это отдельный HTTP-запрос при загрузке страницы. На практике на лендинге хватает одного-двух шрифтов и двух-трёх начертаний суммарно: например, Regular и Bold для текста, отдельное жирное начертание для заголовков. Больше редко нужно даже там, где в макете красиво расписаны шесть весов одного шрифта.
При подключении внешних шрифтов через head-код добавляю параметр display=swap, как в примере выше: это позволяет браузеру сразу показать текст резервным шрифтом, а после загрузки веб-шрифта подменить его, вместо того чтобы держать текст невидимым до полной загрузки файла. Для библиотечных и загруженных через интерфейс шрифтов Тильда обрабатывает это сама.
Если шрифты и блоки на сайте меняются часто, а каждый раз разбираться заново, где в CSS прописан нужный класс, неохота, проще сразу взять техническую поддержку сайта на Тильде и не тратить на это время самостоятельно.
Частые ошибки при подключении шрифтов на Тильде
За годы работы с сайтами на этой платформе регулярно вижу один и тот же набор промахов:
- Шрифт выбран без проверки кириллицы, и в мобильной версии заголовок падает на системный шрифт.
- Загружен только один вес шрифта, а дизайнер в макете использовал жирное начертание, из-за чего браузер рисует псевдо-жирный текст.
- Внешний шрифт подключён кодом в head, но забыли прописать font-family в CSS блока, и шрифт просто не применяется.
- На сайт добавлено пять-шесть разных шрифтов вместо одного-двух, что утяжеляет загрузку страницы и визуально дробит дизайн.
- Используется файл шрифта без проверки лицензии на веб-встраивание, что создаёт юридический риск для владельца сайта.
Большая часть этих ошибок ловится за десять минут, если проверять шрифт до того, как макет утверждён клиентом, а не после того, как сайт уже собран и опубликован.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли использовать на Тильде шрифт, купленный на стороннем сайте с лицензией?
Можно, если лицензия на шрифт явно разрешает веб-встраивание. Загружаете файл через раздел «Шрифты» в настройках сайта или подключаете код, который выдал продавец шрифта, и используете как обычный шрифт в блоках. Лицензию стоит перечитать заранее, у части шрифтов веб-использование продаётся отдельно от печатной версии.
Почему подключённый через код шрифт не появляется в блоке текста?
Потому что список шрифтов в настройках блока Тильды показывает только библиотечные шрифты и те, что загружены через вкладку «Мои шрифты». Внешний шрифт, подключённый кодом в head, нужно дополнительно назначить через CSS для конкретного класса блока, иначе он просто не подхватится интерфейсом.
Как узнать, есть ли в шрифте кириллица, не подключая его на сайт
Откройте шрифт в любом сервисе предпросмотра веб-шрифтов и наберите тестовую фразу на русском языке, включая буквы Ё, Й и Ъ. Если вместо букв показывается латиница или прочерки, кириллицы в файле нет и на сайте вместо заголовка выйдет системный шрифт.
Сколько шрифтов и начертаний разумно использовать на одном сайте
На практике хватает одного-двух шрифтов и двух-трёх начертаний суммарно: например, обычное и жирное для текста, отдельное жирное для заголовков. Каждое лишнее начертание это дополнительный файл, который браузер должен загрузить, а визуально сайт с большим количеством шрифтов чаще выглядит разрозненно, а не богаче.