Кейсы

О студии

Блог

Контакты

12+

Карта

Тех. поддержка (на тильде)

8 (800) 555-01-19

Обсудить задачу

Сайты на Tilda

Разработка сайта

Разработка дизайна

Проектирование

Тех. поддержка (на тильде)

Редизайн сайта

Как загрузить и настроить шрифты в Тильде: 4 способа

Блог

Главная

Как настроить шрифты в Тильде

маркетинг

Следите за внутренней кухней студии в нашем телеграм-канале

Содержание

1. Где взять шрифты для Tilda?

2. Как настроить шрифты в Тильде

4. Google Fonts

3. Библиотека шрифтов Tilda

5. Adobe Fonts

6. Загрузить свой шрифт в Tilda

7. Советы по работе со шрифтами в Tilda

В Tilda можно выбрать шрифты из встроенной библиотеки или загрузить собственные. Спрашиваете, есть ли подводные камни? Конечно. Давайте посмотрим, как настроить шрифты в Тильде, чтобы все выглядело гармонично и читалось легко.

Где взять шрифты для Tilda?

Как видите, Тильда предлагает 4 варианта:

шрифты из библиотеки Tilda;
Google Fonts;
Adobe Fonts;
загрузить собственный шрифт.

Так что, если вам интересно, какие шрифты можно использовать в Тильде, то у вас есть выбор между встроенными и собственными вариантами. Главное, чтобы они в целом подходили к дизайну сайта, были оплаченными, если они платные, и поддерживали кириллицу, если у вас сайт на русском.

Как настроить шрифты в Тильде

Все, что касается шрифтов, настраивается в разделе «‎Настройки сайта» → «‎Шрифты и цвета». Внедрение нового шрифта будет немного отличаться в зависимости от того, откуда вы его возьмете.

1. Библиотека шрифтов Tilda

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

1. Перейдите в «‎Настройки сайта» → «‎Шрифты и цвета». Автоматически Тильда устанавливает свой фирменный шрифт Tilda Sans. Чтобы выбрать что-то другое, нажмите на «‎Расширенные настройки».

2. В разделе шрифтов выберите пару для заголовков и текста. Настройка шрифтов в Тильде довольно простая. Вы сможете выбрать жирность, размер и интервалы для каждого шрифта. Это же можно сделать в меню редактирования страниц.

3. Нажмите «‎Сохранить изменения» вверху страницы, и выбранные шрифты автоматически применятся ко всем текстовым блокам на страницах.

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

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

2. Google Fonts

Google Fonts — это бесплатная библиотека с поддержкой кириллицы. Тильда поддерживает интеграцию с этим сервисом.

Простой вариант. Вы можете выбрать шрифт от Google прямо в настройках сайта. Минус в том, что здесь будет ограниченное количество шрифтов. В реальности у Google Fonts их больше.

1. Перейдите в «‎Настройки сайта» → «‎Шрифты и цвета», затем на вкладку Google Fonts. Здесь можно выбрать шрифт отдельно для заголовков и основного текста. Нажмите «‎Искать в шрифтах» возле нужной категории.

какие шрифты можно использовать в тильде?

2. Вы увидите новое окно для подбора шрифтов из библиотеки Google Fonts. По умолчанию здесь стоит галочка на поддержке кириллицы (Cyrillic). Эту галочку можно убрать, если у вас будет текст на латинице: так в библиотеке появится больше вариантов.

3. Кликните на выбранный шрифт. Можно проверить, как он будет выглядеть в разных начертаниях и размерах. Если вам все подходит, нажмите «‎Выбрать шрифт». Обратите внимание на галочку под кнопкой: здесь можно добавить шрифт и для заголовков, и для основного текста.

4. После того как выберете нужные шрифты, не забудьте нажать «‎Сохранить изменения» вверху страницы.

5. Теперь шрифт появится в списке доступных шрифтов при редактировании страницы.

Альтернативный вариант. Если хочется расширить выбор — можно взять шрифт прямо с сайта Google Fonts. Это потребует чуть бОльшей возни, но почему бы и нет.

1. Перейдите на сайт Google Fonts, выберите шрифт и нажмите Get font возле него.

2. Вы перейдете на страницу шрифта, где вам нужно нажать Get embed code.

3. В открывшемся окне скопируйте код без кавычек, как на скрине ниже.

4. Перейдите в «‎Настройки сайта» → «‎Шрифты и цвета», затем на вкладку Google Fonts. Вставьте скопированную ссылку и укажите имя шрифта. Не забудьте нажать «‎Сохранить изменения» вверху страницы.

5. Теперь шрифт появится в списке доступных шрифтов при редактировании страницы.

3. Adobe Fonts

Подключение Adobe Fonts требует подписки Creative Cloud. То есть, если вы пользуетесь легальным Photoshop, то эта подписка у вас уже есть. Чтобы подключить шрифты Adobe Fonts к сайту на Tilda, выполните следующие шаги.

1. Войдите в Adobe Fonts под оплаченным аккаунтом, выберите шрифт и нажмите «‎Добавить шрифт».

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

2. Теперь нажмите на значок </>, чтобы открыть меню для разработчиков.

3. Введите название проекта (лучше, чтобы оно совпадало с названием проекта в Тильде, чтобы потом не путаться) и нажмите «‎Создать».

4. Теперь Adobe предложит вставить код шрифта в код сайта, но у нас есть вариант попроще. Нажмите «‎Редактировать проект».

5. В открывшемся окне вы увидите информацию о шрифте. Нас интересует его название и идентификатор проекта (Project ID). Их нужно скопировать.

6. Перейдите в Tilda: «‎Настройки сайта» → «‎Шрифты и цвета», затем на вкладку Adobe Fonts. Вставьте скопированный идентификатор проекта в поле Project ID, впишите название шрифта и нажмите «‎Сохраните изменения».

7. Теперь шрифт появится в списке доступных шрифтов при редактировании страницы.

4. Загрузить свой шрифт в Tilda

Tilda поддерживает загрузку шрифтов в форматах .woff и .woff2. Для каждого начертания (тонкий, жирный, полужирный и т. д.) нужно загружать отдельный файл.

Где взять шрифты для Тильды:

BestFonts.pro;
FontSpace;
FontSpring;
Behance.

Если вы влюбились в какой-то шрифт и он оказался платным — лучше за него заплатить. Не советуем качать этот шрифт за бесплатно из альтернативных источников.

Использовать платные шрифты без получения лицензии опасно: можно попасть на штраф за нарушение авторских прав (от 40 000 до 1 500 000 ₽, полтора миллиона, Карл). Если сайт делаете не вы, а начинающий дизайнер — проверяйте, не использует ли он по наивности своей неоплаченные шрифты. Ведь штраф платить придется вам, и прецеденты в РФ уже есть.

Разработаем дизайн

…для вашего сайта с нуля либо сделаем редизайн уже существующего сайта. Проекты по дизайну занимают особое место в сердечке NAJES.

Подробнее

Теперь давайте посмотрим, как добавить свой шрифт в Тильде.

1. Скорее всего, вы загрузили шрифт как архив. Вам нужно перейти в папку этого шрифта и выбрать только файлы .woff.

2. Зайдите в «‎Настройки сайта» → «‎Шрифты и цвета» → «‎Загрузить шрифты» и загрузите шрифт в соответствующее поле: одно начертание — один файл.

3. Ниже укажите название шрифта и где его использовать (например, для заголовков или текста).

как добавить дополнительные шрифты в тильду

4. Теперь нажмите «Сохранить». Шрифт должен появиться в списке шрифтов при редактировании страниц.

Лайфхак. В эти же поля не обязательно грузить разные начертания одного и того же шрифта. Можно загрузить любые шрифты, какие вам вздумается. Например, для основного текста Gotam Pro (в поле Normal), а заголовков — акцидентный рукописный шрифт Vasilek (в поле Bold). Главное потом самому не запутаться, где какой шрифт.

Советы по работе со шрифтами в Tilda

Приводим несколько общих советов для подбора шрифтовой пары (заголовки + основной текст). Сейчас мы говорим о стандартных рабочих проектах.

О сайтах с концептуальным дизайном речи не идет.

Пример

Шрифтовая пара. Заголовки должны быть жирнее, крупнее и выразительнее, чем основной текст. Шрифт без засечек читается легче, поэтому его обычно применяют для основного текста. Шрифт с засечками использовать можно, но осторожно: лучше, если это будут заголовки. Чаще всего достаточно использовать два шрифта на сайте — для заголовков и для текста. Не возбраняется использовать и только один шрифт. А вот 3−4 разноплановых шрифта на одной странице — перебор, за редчайшим исключением.

Заголовки. Используйте выразительный шрифт (например, Montserrat или Open Sans) с начертанием Bold. Оптимальный размер для H1 — 32−56 px на десктопах и 26−32 px на мобильных. Заголовки второго уровня (H2) можно уменьшить до 24−32 px, третьего (H3) — до 20−24 px, чтобы сохранить иерархию. Ключевое здесь — сохранить иерархию, а размер шрифта можно варьировать в зависимости от интерлиньяжа, межбуквенного расстояния и вообще специфики сайта. К каждому проекту нужно подходить индивидуально.

Основной текст. Подойдут нейтральные, легко читаемые шрифты вроде Open Sans или Roboto в обычном начертании (Regular), лучше без засечек. Размер текста — 16−18 px для десктопов и 14−16 px для мобильных, чтобы он был комфортным для чтения на любых устройствах. Информацию, которую нужно добавить, но ее вряд ли будут читать, можно разместить 10−12 шрифтом, например, всякие ОГРН и ИНН.

Заранее проверяйте, поддерживает ли шрифт кириллицу. А то будет обидно.

С осторожностью загружайте шрифты в Тильду. Если вы уже подключили шрифт из библиотеки Tilda (например, Open Sans Normal), а потом решили загрузить другое начертание этого же шрифта (например, Open Sans Bold Italic), будьте готовы к сюрпризам. Разные файлы шрифтов могут не сработать вместе, Тильда может заглючить, а типограф будет вас игнорить. Шрифты слетят, поедет вся верстка, в зероблоках нужно будет заходить в каждый блок и править шрифт. Такое редко, но случается. Поэтому старайтесь не перегружать проект лишними шрифтами, делайте это, только если действительно необходимо.

Платите за платное. Если скачать платный шрифт из пиратских источников — можно получить штраф за нарушение авторских прав. Прецеденты есть, судебные иски из-за шрифтов реально существуют. Так что обращайтесь за дизайном к проверенным студиям, которые имеют совесть, например, к NAJES.