Привет, зайчики! Продолжаем еженедельный ликбез по созданию сайтов на Тильде и сегодня поговорим на важную тему — Шрифты и Цвета. Для тех, кто впервые в моем блоге: вот тут я собираю все статьи для начинающих работать с конструктором. В этом выпуске разберем такие вопросы моих клиентов — неочевидные проблемы со шрифтами, как проверить поддерживает ли шрифт кириллицу, почему нельзя загружать больше 2 шрифтов и так далее.
Ошибка 1. Пытаться загрузить в конструктор больше двух шрифтов
Добавить на Тильде можно только два шрифта — так задумано конструктором, так принято в веб дизайне. В идеале, лучше вообще использовать в проекте один шрифт и для акцента играть с его жирностью. Поэтому, если вы друг захотели для каких-то блоков использовать «особый» шрифт с закорючками — лучше от этой идеи отказаться.
На скриншоте выше можно заметить все способы загрузки шрифтов на Тильду:
- Библиотека — универсальные и проверенные шрифты, которые можно использовать бесплатно.
- Google Fonts — шрифты из бесплатной Библиотеки Google.
- Adobe Fonts — платные шрифты от Adobe.
- Загрузить шрифт — слоты для шрифтов в формате Woff или Woff2, которые вы уже купили и хотели бы использовать в своем проекте.
Часто, дизайнеры злоупотребляют именно последним пунктом — добавляют в толщины совершенно другие шрифты. Да, такой лайфхак может работать — при выборе разной толщины «шрифта» в редакторе текста или в Zero — шрифт будет подставляться совершенно другой.
Но это не удобно и непрактично, и вот почему:
- Запросто забыть какой шрифт соответствует какой толщине.
- Толщины самого шрифта при этом будут не доступны.
- Если толщина не соответствует толщине загружаемого шрифта — шрифт может не работать.
- Если заменить файл или изменить шрифт — шрифты будут работать некорректно.
Стремитесь к простоте — проектируйте проект изначально с учетом 1-2 шрифтов. Основной для текста, акцентный — для заголовка.
О том, как настраивать и подключать шрифты можно прочитать в этой инструкции.
Ошибка 2. Использовать «пиратские» шрифты
Как обычно бывает: понравился шрифт, нашли в сети, скачали — используем в проекте клиента. Признайтесь, как часто вы задумывались, бесплатный это шрифт или его просто слили в сеть?
Если шрифт доступен в интернете и вам просто удалось его скачать — это может быть нелегальная копия. Если это нелегальная копия, то за такой шрифт в проекте клиента прилетит не хилый штраф от правообладателя. Увы, есть люди которые мониторят веб-сайты и проверяют: купленный ли на сайте шрифт, его взяли в аренду или «украли».
Поэтому, старайтесь использовать только легальные шрифты: из Библиотеки шрифтов в самом конструкторе, в Google Fonts или можно поискать шрифты, поддерживающие кириллицу, в шрифтотеке.
Ошибка 3. Использовать шрифты, которые не поддерживают кириллицу
Здесь скорее ошибка по невнимательности — дизайнер ищет нужный шрифт, скачивает его в TTF, затем конвертирует в WOFF — а шрифт вдруг не работает. Не все классные шрифты поддерживают кириллицу, чаще всего она либо платная, либо дизайнер не стал заморачиваться и поэтому ее просто нет.
Классическая ситуация с Google Fonts. Если в поиске Select preview text — можно добавить Russian (русский), то значит шрифт можно использовать в проекте, у него есть вариант кириллицы.
Если вы нашли другой классный шрифт и указать русский языке не получится — то у него нет поддержки кириллицы.
Поэтому, рекомендую искать в этом сервисе шрифты сразу с включенным языком, чтобы не потратить зря время.
Если же вы конвертировали шрифт и в редакторе Zero или в редакторе текста обычного блока он чем-то вам напоминает Arial или Times New Roman — напишите любое слово на английском языке. Если слово отобразилось в нужном вам шрифте и начертании — поздравляю, этот шрифт не поддерживает кириллицу, даже если в TTF он ее поддерживает. Попробуйте загрузить такой шрифт через CSS и сторонний хостинг, или ищите другой.
Ошибка 4. Неправильно указывать название шрифта
Еще одна ошибка по невнимательности — при загрузке шрифта из Google Fonts, Adobe или своего файла, указывать шрифт совсем не так, как он называется. Например, если в ссылке нет пробела в названии шрифта — то и добавлять его не нужно.
Или, если вы загрузили несколько шрифтов в разные начертания — пытаться указать все названия файлов в одном поле:
Назовите загруженный шрифт универсально CUSTOM — тогда, если вы будете даже менять файлы шрифта, это никак не отразится блоках, где шрифт уже подключен. То есть, риски ошибок будут минимальными.
Ошибка 5. Указать неверную ссылку на Google Fonts
Конструктор в данный момент не поддерживает вариативные шрифты Google Fonts. Правильная ссылка на шрифт будет вот такого вида:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
Если шрифт вариативный, то ссылка будет другая:
https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap
Проверяйте внимательно, что добавляете.
Ошибка 6. Если шрифт есть в Библиотеке — не нужно его загружать дополнительно в свои шрифтовые файлы
Например, если в бибилиотеке на Тильде есть Inter — то не нужно его загружать отдельно, достаточно просто назначить шрифт для текста или заголовка. В библиотеке уже добавлены шрифты со всеми толщинами, вы все равно не добавите ничего нового.
Ошибка 7. Менять шрифты для каждой страницы проекта
Бывает, что дизайнеры воспринимают каждую страницу проекта как отдельный сайт. То есть, mysite.com — для них это один сайт, а страница mysite.com/page — это другой сайт. Поэтому, ошибочно заходят в настройки проекта и меняют полностью все загруженные шрифты.
Если так сделать, то изменятся все шрифты во всем проекте. Страница сайта — это страница сайта. Если у сайтов разные домены — то это разные сайты. Это логично, но как показывает практика, не всем это понятно.
Что дальше?
Спасибо, если дочитали до конца. Ставьте лайк, покажите другу-дизайнеру. А если у вас есть вопрос или нужна помощь — пишите комментарий и вместе разберемся, что не так.
В следующем лонгриде поговорим о фишках с цветом и как облегчить себе жизнь после сдачи проекта. Подписывайся!