Как загрузить 2 шрифта в тильду

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

BY

Как добавить шрифт в Тильду, если не хватает встроенных вариантов? Открыть настройки нужного сайта и нажать на кнопку «Загрузить». Главное – заранее подготовить файлы в форматах WOFF или WOFF2.

Загружаем свой файл

Пользователи, которые активно занимаются созданием самых разных сайтов, рано или поздно столкнутся с вопросом, как загрузить шрифт в Тильду. Бывает, что встроенной библиотеки не хватает (хотя там целых семнадцать вариантов).

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

Итак, как установить шрифт в Тильду и пополнить встроенную библиотеку?

• Откройте конструктор и авторизуйтесь в своем аккаунте;
• Найдите на панели наверху вкладку «Мои сайты» ;

• Выберите нужный проект и кликните по его названию;
• Далее нажмите на кнопку «Настройки» , она находится справа;

• Переключитесь на вкладку «Шрифты и цвета» на панели слева;

• Кликните по оранжевой кнопке «Расширенные настройки» ;

• Переключитесь на вкладку «Загрузить…» ;

• Нажмите на иконку «Загрузить файлы…»

Вот мы и подошли к главному! Чтобы без проблем разобраться, как потом поменять шрифт в Тильде, находим на устройстве заранее подготовленные файлы в формате .woff и загружаем их, нажимая на одноименную кнопку.

Максимальное число файлов для загрузки – девять, потому что существуют разные варианты начертания:

• Thin
• Light
• Extra Light
• Normal
• Medium
• Semi-Bold
• Extra Bold
• Bold
• Black

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

Использовать формат .woff2 также можно, но следует помнить, что пока он поддерживается не во всех браузерах – велик риск того, что содержимое сайта будет отображаться некорректно. Рекомендуем следующее решение: используйте woff-файлы, а в дополнение загружайте дубль в формате .woff2.

Ранее рассказали для вас, как удалить сайт на Тильде полностью или отдельно по страницам.

Как только данные будут сохранены, новые варианты начертания появятся в библиотеке и вы сможете ими пользоваться.

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

Как добавить свой шрифт в Тильде?

Нам нужно будет решить две задачи — получить формат woff для загрузки (только такой формат принимает Тильда) и корректно загрузить свои начертания. Конвертировать шрифт в woff можно с помощью любого онлайн-конвертера (загуглите otf to woff или ttf to woff или воспользуйтесь Convertio): просто загрузите туда все свои начертания и сохраните их.

Какие начертания нужны?

Как быть, если вы хотите загрузить несколько шрифтов

Работа с компанией Своёмедиа длится уже более двух лет. За это время реализовано много мероприятий по поддержке и развитию сайта, включая глубокую и неоднократную переработку концепции и взгляда на этот ресурс — в том числе в мыслях у управленцев нашей компании.

Развитие сайта как основного ресурса медийной поддержки компании (мы работаем в достаточно сложном сектор — b2b в химической отрасли) оказывает существенную поддержку нашему бизнесу. И эту поддержку можно разделить на 2 вида — прямую и косвенную.

Прямое вовлечение клиента — заказы, поступающие непосредственно с сайта. Понятно, что мы не интернет-магазин и продать консультационные услуги на 5−10 млн рублей с оплатой наложенным платежом невозможно. Поэтому мы считаем прямые запросы, которые позже конвертируются в работы. Либо вариант «мы посмотрели ваш сайт, позвонили — вы нам подходите».

Общий объем таких работ за последние пару лет можно оценить в 10−15 млн рублей, около 15% от общей выручки. Это является серьезным достижением, безусловно.

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

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

В ближайших планах развития медийного ресурса Инжнирингового центра стоит увеличение доли работ, приходящих через сайт, до 30−50%. У нас есть уверенность, что в сотрудничестве с коллегами из Своёмедиа мы справимся с этой задачей.

Как загрузить 2 шрифта в Тильду?

В коллекции находятся более 20 стандартных и премиум-шрифтов от партнеров, которые предоставляются бесплатно при подписке на Тильду. На вкладках Google Fonts, Adobe Fonts и Your Own Font вы можете загрузить шрифт из внешнего источника.

Как добавить шрифт в тильду из Google Fonts?

Перейдите в Тильду → Настройки сайта → Шрифты и цвета → Расширенные настройки → Google Fonts и поставьте ссылку в поле CSS link. Важно: пропишите в полях Headline Font Family Name и Text Font Family Name полное, точное название шрифта — так, как он называется в Google Fonts.

Сколько шрифты можно подключить к сайту на Tilda?

Максимальное количество шрифтов, которое можно подключить — два.

Какие шрифты можно подключить к сайту на Tilda?

Создавая сайт на Тильде, вы можете подключить бесплатно шрифты из нашей библиотеки. Мы добавили в неё ещё три шрифта: Futura, Circe, Formular. Подключите их в настройках сайта.

Как установить свой шрифт в Word?

1. Загрузите файлы шрифта. .
2. Если файлы шрифта сжаты, распакуйте их. .
3. Щелкните правой кнопкой мыши необходимый шрифт и выберите команду Установить.
4. Если вам будет предложено разрешить программе вносить изменения на компьютере, и вы доверяете источнику шрифта, нажмите кнопку Да.

Как загрузить свой шрифт в канву?

Как добавить текст в Canva в ваш макет

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

Как конвертировать Otf в Woff?

1. Шаг 1. Загрузите otf-файл(ы) Выберите файлы с компьютера, Google Диска, Dropbox, по ссылке или перетащив их на страницу.
2. Шаг 2. Выберите «в woff» Выберите woff или любой другой формат, который вам нужен (более 200 поддерживаемых форматов)
3. Шаг 3. Загрузите ваш woff-файл

Как менять размер шрифта в Тильде?

Чтобы изменить размер шрифта заголовка, перейдите в Настройки блока → Типографика → ЗАГОЛОВОК: РАЗМЕР ШРИФТА. Укажите нужное значение, сохраните изменения и опубликуйте страницу. Если это блок с карточками, у которых есть заголовок, то настройки шрифта золовка будут применяться к заголовкам карточек.

Подключение шрифта к сайту на Тильде

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

Давайте вместе рассмотрим всевозможные варианты работы со шрифтами внутри конструктора Тильды.

Чтобы начать работу со шрифтами, для начала нужно перейти в настройки сайта:

Ищите в левой боковой панели вам нужно найти «Шрифт и цвета»:

Переходите и нажимайте на кнопку «Расширенные настройки»:

В открывшемся окне вы найдете вкладки библиотек шрифтов, с помощью которых можно выбрать шрифт или загрузить свой:

О всех вариантах по-порядку.

Стандартные шрифты в Тильде

Во вкладке «Basic Fonts» вы можете выбрать отдельно шрифт для заголовков и для текста. Эти шрифты установятся на ваш сайт по-умолчанию и их можно будет поменять в любой момент на другие в настройках каждого блока.

Вам предоставляется на выбор 26 шрифта. Некоторые из них системные. Какие-то шрифты из библиотеки GoogleFonts. Есть шрифты, которые предоставляются партнером Тильды — Paratype (шрифт отключается, если платная подписка не продлится, в том числе при экспорте сайта).

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

Библиотеки шрифтов Adobe fonts и Google fonts

Adobe Fonts

Перейдите на сайт https://fonts.adobe.com/fonts и зарегестрируйтесь. Вам нужно иметь активную платную подписку Creative Cloud, чтобы иметь возможность добавлять шрифты в проект. Оплатить можно по ссылке https://www.adobe.com/creativecloud/plans.html

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

Этапы:

1. Найдите подходящий шрифт и активируйте его, а затем перейдите на его страницу.
2. Нажмите на «Add to Web Project», чтобы добавить шрифт в существующий или новый проект.
3. После добавления шрифтов в проект перейдите в настройки проекта.
4. Внутри вашего проекта вы можете посмотреть Project ID и название шрифта, которое нужно вставить в Тильду.
5. Вернитесь в Тильду, в Настройки сайта → Шрифты и цвета → Расширенные настройки → Typekit.
6. Укажите Project ID и пропишите шрифт для заголовка и для текста точно так, как он называется в Adobe Fonts.

Google Fonts

В отличие от Adobe Fonts эти шрифты полностью бесплатны.

Переходите на сайт https://fonts.google.com/. Выберите нужный шрифт и зайдите в него. Для примера я выбрал шрифт Nunito. ЕГо я буду применять к тексту на сайте.

В окне шрифта вы увидите следующее:

Вы можете нажать на кнопку «Download Family» в правом верхнем углу. Тогда вы скачайте архив со всеми начертаниями этого шрифта. Потом вы сможете загрузить в Тильду нужные начертания. Об этом я расскажу чуть позже в этой статье.

На этой же странице вы можете стразу выбрать начертание шрифта, нажав на кнопку «Select this style», как показано на картинке выше.

Как только вы добавляете начертание шрифта, справа появляется окно с настройками вашего выбора. Вы можете продолжить выбирать начертания. Я выбрал два и получил следующее:

Обратите внимание на подчеркнутую ссылку. Эту ссылку вы можете копировать и вставлять в Тильду, чтоб подключить шрифт.

Но давайте сначала рассмотрим вариант сложнее. Я хочу подключить второй шрифт. Для этого возвращаемся назад на страницу всех шрифтов и ищем подходящий. Я выбрал Jura для заголовков и проделал те же действия, как и для шрифта Nunito.

Теперь видим такую картину:

Копируйте подчеркнутую ссылку и возвращайтесь в настройки Тильды.

В поле CSS LINK нужно вставить скопированную ссылку.

Поле HEADING FONT FAMILY NAME — тут вы задаете шрифт для заголовков. Вставьте сюда точное название шрифта из Google fonts, в моем случае Jura.

Поле BODY TEXT FONT FAMILY NAME — — тут вы задаете шрифт для обычного текста. Вставьте сюда точное название шрифта из Google fonts, в моем случае Nunito.

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

Нажимаем сохранить изменения и публикуем все страницы сайта. На своем сайте у меня получились такие изменения шрифта заголовка и текста:

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

Для подключения своих шрифтов вам нужно перейти во вкладку «Your Own Font» в Тильде в Настройки сайта → Шрифты и цвета → Расширенные настройки:

Если вы качали шрифты с Google Fonts, то формат их не будет поддерживаться Тильдой. Чтобы это исправить, можно воспользоваться этим онлайн-конвертором или этим конвертором и переформатировать файлы шрифта в .woff

Когда шрифт уже скачан, нажимайте на кнопку «Загрузить файлы шрифта»:

Тут вы увидите 6 возможных начертаний, которые можно загрузить 6 файлов одного шрифта: Thin (100), Light (300), Normal (400), Medium (500), Semi-Bold (600) и Bold (700).

Далее в поле «УКАЖИТЕ НАЗВАНИЕ ШРИФТА» впишите точное название вашего шрифта. Ниже вы можете сразу назначить этот шрифт для всех заголовков и/или текста по-умолчанию.

Нажмите кнопку «Сохранить» и потом кнопку «Вернуться к настройкам сайта».

Дальше вас вернет на страницу настроек шрифта:

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

Сохраните изменения, опубликуйте все страницы и проверяйте изменения на сайте.

[blognotice text=»Вы можете таки образом загрузить два шрифта. К примеру, в начертания THIN, LIGHIT и NORMAL можно загрузить файлы первого вашего шрифта, а в MEDIUM, SEMI-BOLD и BOLD добавить второй ваш шрифт. В настройках блоков вы сможете выбирать нужное начертания и тем самым менять шрифт.»]

Другие настройки шрифтов

Как вы могли заметить, в Настройки сайта → Шрифты и цвета → Расширенные настройки, есть еще несколько важных полей:

Здесь вы можете задать настройки по-умолчанию для всех страниц:

• выбрать начертание шрифта для обычного текста;
• назначить шрифт для текста;
• выбрать начертание шрифта для заголовков

На этой же странице ниже вы сможете задать цвет для заголовков и текста, цвет ссылок и цвет фона для всех блоков.

Если остались еще какие-то вопросы по подключению шрифтов к Тильде, советую пересмотреть видео ниже. В нем я все детально описываю на конкретных примерах.