Google Fonts предоставляет бесплатные веб-шрифты с открытой лицензией, которые можно подключить к любому проекту. В Tilda нет встроенного выбора всей библиотеки, поэтому подключение выполняется вручную через код. Это позволяет использовать уникальные гарнитуры и улучшать читаемость контента.
Для подключения потребуется ссылка на шрифт из Google Fonts. Она формируется в интерфейсе сервиса после выбора гарнитуры и нужных начертаний. Обычно это строка формата <link href=»https://fonts.googleapis.com/css2?family=…» rel=»stylesheet»>. Её необходимо вставить в настройки сайта или страницы.
В Tilda ссылка вставляется в раздел «Настройки сайта → Дополнительно → Вставка кода в <head>». После этого шрифт будет доступен на всех страницах проекта. Чтобы применить его к тексту, в том же блоке или в настройках стиля текста указывается правило CSS вида font-family: ‘Название шрифта’, sans-serif;.
Если требуется использовать несколько начертаний (например, Regular, Bold и Italic), их нужно добавить сразу при формировании ссылки в Google Fonts. В противном случае браузер не сможет корректно отобразить разные варианты текста.
Где найти код подключения шрифта в Google Fonts
Откройте сайт Google Fonts и выберите нужный шрифт. На странице шрифта нажмите кнопку «Get font» или иконку «+», чтобы добавить его в подборку.
Справа появится панель выбора. В разделе «Use on the web» будет предложено два варианта: подключение через тег <link> для вставки в HTML или через правило @import для CSS.
Для использования в Tilda копируйте именно код с тегом <link>. Он выглядит, например, так: <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">.
В этом коде строка после family= указывает выбранный шрифт и его начертания. Если выбрать несколько шрифтов или стилей, все они будут перечислены в одном URL через символ «&».
Как выбрать нужный начертания и языковые наборы
При подключении шрифта из Google Fonts важно заранее определить, какие начертания будут использоваться. Избыточное количество вариантов (Light, Regular, Medium, Bold, ExtraBold, Italic и др.) увеличивает вес страницы и замедляет загрузку. Если в проекте нужны только заголовки и основной текст, достаточно выбрать, например, Regular и Bold. Курсивы и промежуточные толщины стоит подключать только при реальной необходимости.
Языковые наборы влияют на поддержку символов. Для русскоязычных сайтов всегда выбирайте Cyrillic или Cyrillic Extended. Если проект рассчитан на несколько регионов, добавляйте дополнительные наборы: Latin, Greek, Vietnamese. Не стоит подключать все доступные варианты, если они не будут использоваться: это также увеличивает размер загружаемого файла.
Перед выбором убедитесь, что шрифт содержит все нужные символы: буквы с диакритикой, знаки валют, спецсимволы. Проверку можно сделать прямо на странице Google Fonts, введя тестовую строку на нужном языке. Такой подход позволяет избежать ситуации, когда часть текста отображается системным шрифтом из-за отсутствия символов.
Генерация кода подключения через интерфейс Google Fonts
Для получения корректного кода подключения необходимо использовать официальный интерфейс Google Fonts. Он формирует готовые ссылки и правила CSS для вставки в проект Tilda.
- Перейдите на сайт fonts.google.com.
- Выберите нужный шрифт, воспользовавшись поиском или фильтрацией по категориям и поддерживаемым языкам.
- На странице шрифта откройте блок Select styles и отметьте нужные начертания (Regular, Bold, Italic и т.д.).
- В правой панели появится вкладка Selected family. Там формируется код для вставки.
Доступны два варианта генерации:
- Через тег <link> – скопируйте строку вида:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> - Через @import – в блоке CSS указан вариант подключения:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Для Tilda предпочтительно использовать тег <link>, так как он загружает шрифты быстрее и не блокирует рендеринг.
После выбора стилей и копирования кода можно перейти к настройке в панели Tilda, вставив сгенерированный фрагмент в раздел «Дополнительный код».
Вставка кода подключения в настройки сайта Tilda
Откройте проект в Tilda и перейдите в раздел «Настройки сайта» → «Дополнительно» → «HTML-код для вставки в <head>». В это поле добавляется ссылка на выбранный шрифт из Google Fonts.
Код берётся на странице Google Fonts после выбора начертаний. Нажмите «Get embed code» и скопируйте блок . Пример:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Вставьте скопированную строку в поле для кода в <head> и сохраните изменения. После публикации сайта шрифт будет доступен для использования в CSS или в настройках блоков Tilda.
Подключение шрифта через раздел «Дополнительный CSS»
Чтобы использовать шрифт из Google Fonts через «Дополнительный CSS» в Tilda, необходимо выполнить несколько шагов.
- Откройте сайт Google Fonts и найдите нужный шрифт.
- Нажмите кнопку Select Style и скопируйте строку подключения из раздела @import. Пример:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');- В Tilda перейдите в «Настройки сайта» → «Дополнительный CSS» и вставьте строку @import в самое начало поля.
- После импорта укажите использование шрифта для нужных элементов. Например:
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
}Можно прописывать разные семейства для отдельных блоков, классов и тегов, чтобы точно контролировать внешний вид текста.
- Не вставляйте код в конец, так как Tilda может обрезать часть CSS.
- Используйте fallback-шрифт (например, sans-serif) для корректного отображения при ошибке загрузки.
- Проверяйте, чтобы подключаемые начертания совпадали с теми, что указаны в стилях (400, 700 и т. д.).
Назначение шрифта для заголовков и текста в настройках блоков
После подключения шрифта через Google Fonts его нужно выбрать в каждом блоке, где используется текст. Для этого откройте блок в режиме редактирования, перейдите в «Настройки» → «Текст» и укажите подключённый шрифт в выпадающем списке.
Для заголовков и основного текста можно задавать разные гарнитуры. Это полезно, когда требуется визуально разделить акценты: заголовки могут быть выделены более контрастным шрифтом, а текст – читабельным и нейтральным.
Если блок содержит несколько текстовых элементов (заголовок, подзаголовок, описание, кнопка), у каждого в настройках есть отдельное поле выбора шрифта. Изменения применяются сразу и сохраняются автоматически после публикации.
Рекомендуется проверять, как выбранные шрифты выглядят на мобильных устройствах. Некоторые гарнитуры, особенно декоративные, в маленьком размере теряют читаемость. Для таких случаев в настройках можно назначить отдельный размер и межстрочный интервал, не меняя сам шрифт.
Чтобы сохранить единый стиль на всех страницах, используйте одни и те же настройки для одинаковых блоков. При необходимости можно создать «Мой стиль» и повторно применять его к новым элементам.
Использование подключенного шрифта в Zero Block
После подключения шрифта через раздел «Настройки сайта» его можно выбрать внутри Zero Block. Для этого откройте нужный блок, выделите текстовый элемент и в панели справа найдите поле «Font family».
В выпадающем списке появится название шрифта, загруженного из Google Fonts. Выберите его, чтобы применить к конкретному текстовому объекту. Если шрифт подключён в нескольких начертаниях, в поле «Font weight» будут доступны варианты – например, 400, 500 или 700.
Для единообразия оформления рекомендуется сразу задавать одинаковые параметры гарнитуры для всех заголовков и текстовых блоков. Это позволит избежать несоответствия между Zero Block и стандартными блоками Tilda.
Если нужное начертание не отображается, проверьте, добавлено ли оно в настройках подключения шрифта. Zero Block не подгружает автоматически отсутствующие веса, их нужно выбрать вручную при интеграции Google Fonts.
Проверка корректного отображения шрифта на сайте
Откройте сайт в нескольких браузерах: Chrome, Firefox, Safari и Edge. Разные движки рендеринга могут по-разному отображать один и тот же шрифт.
Измените масштаб страницы (Ctrl + / Ctrl — или Cmd + / Cmd -) и проверьте читаемость текста на разных уровнях увеличения. Это позволит выявить проблемы с размытостью или потерей чёткости.
Проверьте отображение на устройствах с разным разрешением: от старых ноутбуков до Retina-экранов и 4K-мониторов. На высоких DPI-экранах ошибки сглаживания видны особенно заметно.
Откройте сайт на смартфонах и планшетах. Иногда подключённый шрифт корректно работает на десктопе, но не загружается на мобильных устройствах из-за особенностей кэша или блокировок.
Включите режим разработчика в браузере и в панели «Network» посмотрите, загружается ли файл шрифта с сервера Google Fonts без ошибок. Если файл не подтягивается, шрифт заменится системным.
Сравните внешний вид текста с эталонным образцом на сайте Google Fonts. Это поможет заметить искажения межбуквенного интервала или неверные начертания.
Тестируйте разные начертания (regular, bold, italic). Иногда подключается только основное, а дополнительные стили остаются недоступны.
Вопрос-ответ:
Можно ли подключить шрифт с Google Fonts к отдельному блоку, а не ко всему сайту в Tilda?
Да, это возможно. В Tilda вы можете прописать нужный шрифт через «Дополнительный CSS» внутри конкретного блока. Для этого нужно скопировать код подключения из Google Fonts, вставить его в раздел «Настройки сайта → Дополнительный код», а затем в стилях блока задать CSS-правило с указанием выбранного шрифта только для нужного элемента. Таким образом, он не затронет весь проект, а будет применяться лишь там, где вы его прописали.
Нужно ли вставлять код Google Fonts на каждую страницу отдельно?
Нет, этого делать не требуется. Код подключения шрифта достаточно вставить один раз в настройках сайта — он автоматически подгрузится на все страницы проекта. А вот сами правила CSS для применения шрифта можно задавать точечно: либо в глобальных стилях, либо в отдельной странице, если шрифт нужен только там.
Почему шрифт из Google Fonts может не отображаться после подключения в Tilda?
Причин может быть несколько. Чаще всего дело в том, что код подключения был вставлен не в тот раздел: его нужно добавлять в «Настройки сайта → Дополнительный код в <head>». Также стоит проверить правильность написания названия шрифта в CSS — оно должно совпадать с тем, что указано на сайте Google Fonts. Если всё сделано верно, но шрифт не загружается, возможно, в браузере остался кэш старой версии страницы, и стоит очистить его или обновить сайт в режиме инкогнито.
Можно ли подключить сразу несколько шрифтов из Google Fonts в проект на Tilda?
Да, можно. На сайте Google Fonts при выборе нескольких шрифтов сервис формирует общий код подключения, где перечислены все выбранные гарнитуры. Этот код вы копируете и вставляете в настройки Tilda. Затем в CSS вы указываете конкретный шрифт для нужных элементов сайта, используя разные значения свойства font-family. Таким способом вы можете комбинировать несколько стилей в одном проекте.
Загрузка...
