Как в Tilda подключить шрифты от Google Fonts

Чтобы подключить Google Fonts в Tilda, откройте Настройки сайта → Шрифты → Расширенные настройки и перейдите на вкладку Google Fonts. Дальше два пути: выбрать шрифт через встроенный поиск «Искать в шрифтах» либо вставить готовую CSS-ссылку с fonts.google.com в поле CSS link и прописать имя шрифта в полях Headline и Text Font Family Name. Публикуете страницы — шрифт применён.

Обновлено в 2026 году. Материал подготовлен редакцией Зерокодера по официальной справке Tilda.

Коротко, что нужно знать до старта:

• В Tilda три источника шрифтов: встроенная библиотека, Google Fonts и загрузка своего файла (.woff / .woff2). Плюс Adobe Fonts и ссылка на внешний CSS.
• Google Fonts подключается двумя способами: через встроенный поиск и вручную по CSS-ссылке. Второй нужен, когда шрифта нет во внутреннем списке или нужен точный контроль над начертаниями.
• Для русского текста включите фильтр Cyrillic — иначе на сайте появятся квадраты или подставится системный шрифт.
• Настройки шрифта применяются глобально: ко всем блокам на всех страницах.
• На сайт можно подключить до трёх шрифтов.

Способ 1: подключить Google Fonts через встроенный поиск Tilda

Самый быстрый путь — не выходя из редактора. Здесь Tilda сама генерирует CSS-ссылку, ошибиться негде.

1. Зайдите в Настройки сайта → Шрифты (в интерфейсе раздел может называться «Шрифты и цвета»).
2. Нажмите кнопку Расширенные настройки и откройте вкладку Google Fonts.
3. Кликните «Искать в шрифтах» — откроется каталог. Ищите по названию или отфильтруйте по стилю: с засечками (serif), без засечек (sans-serif), рукописные (handwriting), моноширинные (monospace), декоративные (Display).
4. Оставьте включённой поддержку кириллицы. Снимайте галочку только если на сайте не будет русского текста.
5. Выберите нужные начертания и нажмите «Выбрать шрифт». Отметьте, использовать ли шрифт и для заголовков, и для основного текста.
6. CSS-ссылка подставится в поле автоматически. Сохраните изменения и опубликуйте страницы.

Мини-вывод: если шрифт есть во встроенном каталоге, этот способ закрывает задачу за минуту и без ручного копирования ссылок.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Способ 2: подключить Google Fonts вручную по CSS-ссылке

Ручное подключение нужно, когда конкретного шрифта нет во встроенном поиске Tilda либо вы хотите жёстко задать набор начертаний. Здесь вы берёте ссылку прямо с сайта Google Fonts.

1. Откройте fonts.google.com и подберите шрифт. Если на сайте кириллица, включите фильтр Cyrillic — он отсеет шрифты без поддержки русского.
2. Нажмите «+ Select this style» у каждого нужного начертания (Regular, Medium, Bold и т. д.). Лишние веса не берите — каждое начертание добавляет вес странице.
3. На панели справа откройте вкладку <link> и скопируйте URL из атрибута href — часть в кавычках вида https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap.
4. В Tilda откройте Настройки сайта → Шрифты и цвета → Расширенные настройки → Google Fonts и вставьте ссылку в поле CSS link.
5. Впишите точное имя шрифта в поле Headline Font Family Name (шрифт заголовков) и в Text Font Family Name (шрифт основного текста).
6. Опубликуйте все страницы сайта — без публикации изменения не применятся.

Имя шрифта пишите ровно так, как он называется в Google Fonts, с учётом регистра и пробелов. Если сомневаетесь, сверьтесь с параметром family= в самой ссылке: там пробелы заменены на + (например, Open+Sans — значит имя «Open Sans»).

Как назначить шрифт заголовкам и тексту

В Tilda за типографику отвечают два поля. Headline Font Family Name — шрифт для заголовков, Text Font Family Name — для основного текста. Хотите разные шрифты (например, характерный акцидентный для заголовков и нейтральный для абзацев) — впишите в эти поля разные имена. Хотите один шрифт на весь сайт — продублируйте одно и то же имя в оба поля.

Настройки действуют глобально: заданный шрифт распространяется на все блоки всех страниц. Если нужен другой шрифт в одном блоке, его переопределяют локально через верхнюю панель редактирования — но именно это чаще всего и ломает единообразие (см. раздел про проблемы).

Как подключить два шрифта Google Fonts сразу

Связка «шрифт для заголовков + шрифт для текста» — стандарт нормального дизайна. Собрать её можно в один заход:

1. На fonts.google.com выберите начертания у двух разных шрифтов — оба попадут в блок «Selected Families».
2. Скопируйте общую CSS-ссылку — в ней уже перечислены оба семейства.
3. Вставьте её в поле CSS link в Tilda.
4. Имя первого шрифта впишите в Headline Font Family Name, имя второго — в Text Font Family Name.

Помните про лимит: Tilda поддерживает до трёх шрифтов на сайт. Для большинства проектов двух более чем достаточно.

Загрузка своего шрифта, если его нет в Google Fonts

Отдельный сценарий — фирменный шрифт бренда или платный шрифт, которого нет в каталоге Google. Tilda позволяет загрузить его файлом. На той же вкладке Расширенные настройки есть раздел «Загрузить шрифт».

Ключевое ограничение: принимаются только форматы .woff и .woff2. Если у вас .ttf или .otf, сначала сконвертируйте файл в woff/woff2 — это веб-форматы, они легче и быстрее грузятся. Для кириллицы убедитесь, что в самом файле шрифта есть русские глифы: частая ошибка — загрузили латинскую версию, а на сайте вместо русских букв пустые прямоугольники.

Мини-вывод: свой шрифт — это про брендинг и юридически чистые платные гарнитуры. Для типовых задач Google Fonts закрывает большинство потребностей бесплатно.

Другие источники шрифтов, кроме Google Fonts

Google Fonts — не единственный вариант. На той же вкладке Расширенные настройки в Tilda доступны ещё несколько источников, и иногда они уместнее:

• Встроенная библиотека Tilda — более 20 стандартных и премиум-шрифтов от партнёров, бесплатных по подписке. Если задача не требует конкретной гарнитуры, начните отсюда: подключать ничего не нужно, шрифты уже оптимизированы под платформу.
• Adobe Fonts — большая библиотека Adobe. Подключается отдельной вкладкой и пригодится, если у вас уже есть подписка Adobe и нужный шрифт живёт там, а не в Google Fonts.
• Ссылка на внешний CSS — можно указать URL CSS-файла со шрифтом, размещённого на стороннем сервере. Это запасной путь для шрифтов, которых нет ни в одном каталоге.

Мини-вывод: для 90% сайтов достаточно связки «встроенная библиотека + Google Fonts». Adobe Fonts и внешний CSS — это про специфические брендовые гарнитуры.

Сравнение способов подключения

Три рабочих способа и когда какой брать:

Скорость загрузки: чтобы шрифт не тормозил сайт

Шрифты — это дополнительные файлы, которые браузер грузит перед отрисовкой текста. Несколько практик, чтобы не проседать по скорости:

• Берите только нужные начертания. Каждый вес (400, 500, 700) и каждый стиль (курсив) — отдельный файл. Пять начертаний «на всякий случай» — это лишние килобайты на каждой загрузке страницы.
• Оставляйте параметр display=swap. Он есть в ссылке Google Fonts по умолчанию и позволяет браузеру сразу показать текст системным шрифтом, а затем подменить его на ваш — вместо пустого экрана на время загрузки.
• Не подключайте лишние subset’ы. Если сайт только на русском и латинице, не тащите греческий или вьетнамский набор символов — это раздувает файл.
• Держитесь двух шрифтов. Три семейства по несколько начертаний заметно бьют по времени загрузки, особенно на мобильных.

Частые проблемы и как их решить

Шрифт не применился

Самая распространённая причина по официальной справке Tilda: в настройках сайта подключён один шрифт, а на странице через верхнюю панель редактирования назначен другой. Локальное назначение перебивает глобальное. Решение — сбросить переопределение: выделите блок и нажмите «Очистить стиль» в верхней панели редактирования. Вторая частая причина — забыли опубликовать страницы после смены настроек.

Имя шрифта указано неверно

Если в полях Headline / Text Font Family Name имя написано с опечаткой или в другом регистре, браузер не найдёт шрифт и подставит системный. Сверяйте написание с параметром family= в CSS-ссылке.

Нет кириллицы — вместо букв квадраты

Значит, подключён шрифт без русских глифов. При ручном способе включите фильтр Cyrillic на fonts.google.com и выбирайте только шрифты с поддержкой кириллицы. При загрузке своего файла проверьте, что в нём есть русские символы.

Что запомнить

• Быстро и без ошибок — встроенный поиск Google Fonts в Расширенных настройках.
• Нет шрифта в списке или нужен точный набор начертаний — ручная CSS-ссылка с fonts.google.com.
• Фирменный или платный шрифт — загрузка файла .woff / .woff2.
• Для русского текста всегда проверяйте поддержку кириллицы.
• Имя в Headline / Text Font Family Name должно точно совпадать с именем шрифта.
• После любых изменений публикуйте страницы.

Частые вопросы

Сколько шрифтов можно подключить в Tilda?

До трёх шрифтов на сайт. На практике достаточно двух: один для заголовков, один для основного текста.

Бесплатны ли шрифты Google Fonts?

Да, каталог Google Fonts бесплатен, в том числе для коммерческих сайтов. Отдельная оплата Tilda за это не берётся.

Почему на сайте вместо русских букв квадраты?

Подключён шрифт без кириллических глифов. Включите фильтр Cyrillic на fonts.google.com и выберите шрифт с поддержкой русского, либо проверьте глифы в своём файле.

Какое имя шрифта писать в Headline Font Family Name?

Точное название шрифта, как оно указано в Google Fonts, с учётом регистра и пробелов. Ориентир — параметр family= в CSS-ссылке, где пробелы заменены на «+».

Какие форматы шрифтов принимает загрузка своего файла?

Только .woff и .woff2. Файлы .ttf или .otf нужно предварительно сконвертировать.

Почему шрифт подключил, а он не отображается?

Чаще всего на блоке через верхнюю панель назначен другой шрифт поверх глобального. Нажмите «Очистить стиль» на блоке. Также проверьте, что страницы опубликованы, а имя шрифта написано без опечаток.