Шрифты в Тильде: как подключить свой шрифт и выбрать пару для сайта

Где в Тильде меняются шрифты

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

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

Где ещё задаётся шрифт:

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

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

Библиотека Тильды

В библиотеке больше 20 стандартных и премиальных шрифтов от партнёров, они входят в подписку. Это самый простой вариант: выбрали из списка, и всё работает, лицензия уже решена.

Google Fonts

Бесплатная коллекция, в которой сотни семейств. Подключается во вкладке Google Fonts в тех же настройках: вписываете название шрифта, выбираете начертания. Шрифты Google Fonts распространяются под открытыми лицензиями, поэтому их можно использовать на коммерческом сайте.

На fonts.google.com есть фильтр по языку. Включайте кириллицу до того, как влюбитесь в шрифт: многие красивые шрифты существуют только в латинице.

Adobe Fonts

Подключается, если у вас есть подписка Adobe. Для малого бизнеса в России этот путь сейчас неудобен из-за оплаты, поэтому мы его почти не используем.

Свой шрифт

Нужен, когда у компании есть фирменный шрифт из брендбука или куплен шрифт у словолитни. Про загрузку подробно ниже.

Как загрузить свой шрифт в Тильду

По справке о своих шрифтах порядок такой:

1. Подготовьте файлы в формате woff (его понимают все браузеры) и при желании woff2 для современных браузеров. Если у вас ttf или otf, переведите их в woff через конвертер.
2. Откройте настройки сайта, раздел шрифтов, перейдите в расширенные настройки и на вкладку загрузки своего шрифта.
3. Загрузите файл для каждого начертания: обычное, полужирное, жирное. Всего можно загрузить до девяти начертаний одного шрифта — от Thin (100) до Black (900).
4. Впишите название шрифта и укажите, где он используется: в заголовках или в тексте.
5. Если нужен второй или третий свой шрифт, добавьте его отдельно. Максимум — три своих шрифта.
6. Переопубликуйте все страницы, чтобы изменения появились на сайте.

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

Почему загруженный шрифт не отображается

Лицензия: можно ли ставить любой шрифт на сайт

Шрифт — это программа, и у него есть правообладатель. Скачать файл с сайта «бесплатные шрифты» и поставить на коммерческий сайт — риск получить претензию.

Что проверить перед загрузкой:

• Тип лицензии. У платных шрифтов лицензии бывают для печати, для сайта, для приложения. Для сайта нужна веб-лицензия. Часто она считается по числу просмотров в месяц.
• Откуда файл. Если шрифт купил дизайнер на свой аккаунт, лицензия у него, а не у вас. Попросите оформить на компанию.
• Открытые лицензии. Шрифты из Google Fonts и многие открытые шрифты, например семейство PT от ParaType, можно использовать бесплатно, в том числе в коммерции.

Мы в своих проектах для малого бизнеса чаще берём открытые шрифты с хорошей кириллицей. Выбор среди них большой, а вопросов с лицензией не возникает.

Как подобрать пару шрифтов для сайта

Пара — это шрифт для заголовков и шрифт для текста. Простые правила:

1. Один шрифт для текста, который точно хорошо читается. Не экспериментируйте в основном тексте.
2. Заголовочный шрифт задаёт характер. Он может быть с засечками, широким, узким, но должен поддерживать кириллицу полностью.
3. Контраст или родство. Либо два шрифта явно разные (с засечками и без), либо один шрифт в двух насыщенностях. Два похожих, но разных гротеска выглядят как ошибка.
4. Максимум три начертания на сайт. Например, обычный текст, полужирный для акцентов и жирный для заголовков.

Готовые пары под разные ниши

Все шрифты ниже есть в Google Fonts и поддерживают кириллицу на момент написания статьи. Пары — отправная точка, их можно менять под ваш стиль.

Совет из практики: прежде чем утверждать пару, наберите в ней свой реальный первый экран — заголовок, подзаголовок, кнопку и цену. На «Lorem ipsum» любая пара выглядит хорошо. На фразе «Ремонт ванной под ключ от 180 000 ₽ за 14 дней» видно, держит ли шрифт цифры и длинные слова.

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

Размер шрифта в Тильде и мобильная версия

Хвост запроса «шрифт в мобильной версии тильда» появляется не просто так. Главная претензия к сайтам, которые нам приносят: на телефоне текст или мелкий, или заголовок разрывает экран на шесть строк.

В стандартных блоках Тильда уменьшает размеры на мобильных автоматически. Но если дизайнер выставил основной текст 14 пикселей на компьютере, на телефоне он станет ещё мельче.

В Zero Block размер задаётся отдельно для каждой ширины экрана. Если дизайнер настроил только десктоп, на телефоне получится то, что получится.

Ориентиры, которых мы придерживаемся:

Это не стандарт, а рабочие цифры. Проверка простая: откройте сайт на своём телефоне на расстоянии вытянутой руки. Если хочется увеличить — шрифт мелкий. Другие поломки мобильной версии разобраны в статье мобильная версия сайта на Тильде.

Шрифты и скорость сайта

Каждое начертание — отдельный файл, который браузер скачивает до того, как покажет текст красиво. Четыре начертания фирменного шрифта плюс второй шрифт для заголовков — это заметная прибавка к весу первого экрана.

Что помогает:

• оставить два-три начертания вместо пяти-шести;
• использовать woff2, он легче;
• включить в настройках показ системного шрифта на время загрузки: текст появляется сразу, а фирменный шрифт подменяет его после загрузки.

Подробно про то, что ещё тормозит сайты на Тильде и как это замерить, — в статье скорость сайта на Тильде.

Условный пример: сколько стоит «красивый» шрифт

Пример условный, не кейс студии. Сайт студии маникюра: заголовки рукописным шрифтом, текст тонким гротеском 14 пикселей, пять начертаний.

• На телефоне основной текст получился около 13 пикселей, тонкий, серый на бежевом.
• Посетители с рекламы доходили до блока с ценами и уходили: прайс читался с трудом.
• После замены на текст 16 пикселей обычной насыщенности, тёмный на светлом, и сокращения до трёх начертаний прайс стал читаться без увеличения.

Если из 1 000 посетителей с рекламы раньше 15 оставляли заявку, а после правки стали оставлять 20, при клике 40 ₽ заявка подешевела с 2 667 до 2 000 ₽. Цифры условные, но механика реальная: шрифт в основном тексте влияет на деньги сильнее, чем шрифт в заголовке.

Частые ошибки со шрифтами на сайтах

Что мы видим чаще всего, когда открываем сайты на разбор:

• Пять шрифтов на одной странице. Каждый блок собирали отдельно, и в каждом свой шрифт.
• Заголовки капсом длинными фразами. Три строки прописными буквами читаются тяжело.
• Тонкое начертание в основном тексте. Красиво на мониторе дизайнера, бледно на телефоне.
• Рукописный шрифт в меню и кнопках. Его трудно прочитать быстро, а именно там нужна скорость.

Чек-лист шрифтов на сайте

1. Шрифты заданы в настройках проекта, а не вручную в каждом блоке.
2. Не больше двух шрифтов и трёх начертаний.
3. Кириллица есть во всех начертаниях, включая жирное и курсив.
4. Лицензия разрешает использование на сайте и оформлена на вас.
5. Основной текст на телефоне 16 пикселей или крупнее.
6. Цифры в ценах и телефонах хорошо различимы.
7. Контраст текста с фоном достаточный: серый на сером не читается.
8. После смены шрифта все страницы переопубликованы.

Если сайт уже собран, а шрифты, сетка и первый экран живут каждый своей жизнью, оставьте контакты. Посмотрим и скажем, что поправить в первую очередь.