Свой шрифт в Тильде html-блок
Нужна помощь/совет. Мне необходимо в конструкторе сайтов https://tilda.cc/ru/, в html-блоке (Т123) использовать свой кастомный шрифт. Вот пример кода: http://maasslending.tilda.ws/font Нормально отображает шрифт только Safari. Chrome, Firefox, Opera — не отображают шрифт. Насколько я понял, эти браузеры не грузят шрифты с других доменов. А это единственный способ, как я понял, чтобы подключить свои шрифты, так как Тильда не даёт загружать файлы к себе на хостинг. Пробовал интегрировать шрифт в код CSS с помощью base64, но Тильда такой код вообще не принимает. Может существует способ чтобы решить мою проблему? Заранее благодарен.
Отслеживать
задан 17 окт 2019 в 18:41
Andrew Gor Andrew Gor
177 1 1 серебряный знак 8 8 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
В настройках сайта есть вкладка шрифты и цвета. Как видно из картинки — Вы можете выбрать, например, шрифты из Google fonts либо загрузить свой шрифт.
P.S. Ваш вопрос не касается тех тегов, которые Вы перечислили. Более правильно было бы поставить тег tilda
Отслеживать
ответ дан 28 окт 2019 в 6:49
Gayrat Vlasov Gayrat Vlasov
591 6 6 серебряных знаков 15 15 бронзовых знаков
Спасибо за подсказку, оказывается действительно можно получить доспуп к этой таблице стилей со шрифтами из html-блока. Хотя рвньше я пробовал и у меня не получалось.
Подключение Google Fonts
Google Fonts — это большая библиотека бесплатных шрифтов, которые можно использовать в любых проектах, в том числе коммерческих. Рассмотрим в статье, как добавить шрифты из этой библиотеки для использования на своем сайте.
Подключение шрифтов от Google Fonts с помощью поиска внутри библиотеки Тильды
Для того, чтобы подключить шрифт от Google Fonts, перейдите в настройки сайта → Шрифты и Цвета и нажмите на кнопку «Расширенные настройки».
Вы перейдете к списку способов добавления шрифтов на сайт. Перейдите на вкладку Google Fonts и нажмите на кнопку «Искать в шрифтах», чтобы перейти к библиотеке шрифтов от Google Fonts.
Откроется окно, в котором можно поискать шрифт по названию или выбрать нужный стиль шрифта — c засечками, без засечек, рукописный, моноширинный или Display — шрифт для крупных заголовков или текстовых элементов.
Если ваш проект не подразумевает использование кириллицы, то можно отключить ее поддержку, чтобы расширить базу доступных шрифтов.
После выбора нужного шрифта, можно посмотреть и выбрать нужные вам начертания. После выбора начертаний, нажмите на кнопку «Выбрать шрифт» и опционально галочку, если вы хотите использовать этот шрифт и для заголовков, и для текста.
После выбора в поле ссылки для Google Fonts автоматически подставится нужная ссылка для его подключения. Сохраните изменения. Шрифт подключен — теперь его параметрами можно управлять при редактировании страниц.
Как добавить шрифт в тильду из гугл фонтс
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Как выбрать правильный шрифт для сайта и статьи
Руководство, которое поможет выбрать шрифт, не погружаясь в теорию.
Шрифт — это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с сайтом что-то не то, если шрифт, который вы используете, не подходит проекту.
Мы исходили из того, что вы делаете сайт на Тильде. По нашему мнению, на данный момент это самый удобный способ создать сайт самостоятельно, без программиста и дизайнера.
В статье мы рассмотрели:
Как поменять и настроить шрифт для сайта на Тильде
Шрифт задается в настройках сайта. Это значит, что параметры будут применяться глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Максимальное количество шрифтов, которое можно подключить — два. С одной стороны, использовать небольшое количество шрифтов — хорошая практика с точки зрения визуального стиля в целом. С другой, каждый дополнительный шрифт сильно увеличивает вес страницы . Поэтому, чтобы скорость загрузки была приемлемой, шрифта только два.
В настройках сайта на вкладке шрифты и цвета вы увидите галерею шрифтов.
Пролистайте её, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.
Настройки сайта → Шрифты и цвета.
Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:
(По ссылкам подробные инструкции по каждому типу подключения).
Настройки сайта → Шрифты и цвета → Расширенные настройки.
Если вы пролистаете страницу ниже, то увидите настройки размера, насыщенности и цветов текста. Параметры, которые вы укажете тут, будут применены ко всем страницам сайта. Если в каких-то отдельных блоках вам нужно будет их поменять, это можно будет сделать в редакторе для конкретного блока.
Настройки сайта → Шрифты и цвета → Расширенные настройки → Размер, насыщенность и цвета.
Что такое насыщенность шрифта
Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть также дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное. Для базового набора на Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold. Но если загружать шрифт с помощью файла, можно добавить дополнительные начертания.
Семь вариантов насыщенности шрифта Avenir.
Каким должен быть размер шрифта на сайте
Размер зависит от количества текста. Если текста очень мало и он используется, по сути, только для подписей и комментариев, сделайте шрифт крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно.
Если текста достаточно много, наоборот уменьшите шрифт до 18px, так он будет легче читаться.
Настройка параметров шрифта для разных типов проекта
Начнем с самого простого: какой у вас тип проекта? Это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лендинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.
Шрифт для сайта
(лендинг, многостраничный сайт, интернет-магазин)
Шрифт для статьи
(пост в блоге, лонгрид, рассказ, интервью)
Настройка шрифтов для сайта в зависимости от тональности
Когда вы только приступаете к дизайну сайта, подумайте, подойдет ли вам шрифт, который установлен по умолчанию, потому что он должен соответствовать тону вашего проекта. Сайт детского спортивного лагеря и сайт архитектурной студии — это проекты, которые имеют разную тональность. Выразить ее можно с помощью насыщенности.
Мы рассмотрим 4 варианта сочетаний разной насыщенности в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.
Полужирный заголовок и нормальный текст
Semi-Bold+Normal
Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента.
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница студии загара. В примере используется: Tilda Sans.
Жирный заголовок и нормальный текст
Bold+Normal
Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница курса живописи. В примере используется Arial.
Жирный заголовок и тонкий текст
Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль
Для каких сайтов подойдет: мы использовали т акое сочетание на лендинге нашего курса « Интернет-маркетинг с нуля ». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница проектов интерьерного бюро.
В примере используются: Montserrat для заголовков и Open Sans для текста.
Тонкий заголовок и тонкий текст
Light+Light
Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница сайта по уходу за растениями. В примере используется Futura.
Примеры сочетаний разных шрифтов
Сочетая разные шрифты в заголовках и в тексте, можно добиться разного эффекта, выразить характер и тональность сайта.
Страница сайта томатной фермы. В примере используются: Oswald для заголовков и Montserrat для текста.
Страница сайта дизайн-бюро. В примере используются: Kharkiv Tone для заголовков и Arial для текста.
Страница сайта с рецептами. В примере используются: Cormorant Garamond для заголовков и Inter для подзаголовков.
Страница сайта томатной фермы. В примере используются: Oswald для заголовков и Montserrat для текста.
Страница сайта дизайн-бюро. В примере используются: Kharkiv Tone для заголовков и Arial для текста.
Страница сайта с рецептами. В примере используются: Cormorant Garamond для заголовков и Inter для подзаголовков.
Как подобрать шрифт для статьи
В статье самое главное, чтобы текст читался максимально легко. Поэтому он должен быть контрастным и не слишком крупным.
Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет и текст — это в основном подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Статья в блоге о ювелирной коллекции
Главная страница сайта бренда украшений.
В примере используются: Playfair Display для заголовков и Open Sans для надзаголовков.
Страница с информацией о новой коллекции украшений.
В примере используются: Playfair Display для цитат и Open Sans для текста.
Статья в корпоративном блоге
Обложка статьи в блоге. В примере используется Futura.
Текст статьи про Сантк-Петербург. В примере используется Futura.
Статья про Landing page
Обложка статьи про Landing page.
В примере используются: Druk Text Wide для заголовка и Tilda Sans для надзаголовка.
Текст статьи про Landing page.
В примере используются: Druk Text Wide для заголовков и Tilda Sans для текста.
С засечками или без?
Шрифт без засечек
Шрифт с засечками
Оранжевые частицы на изображении — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Helvetica Light, справа — Baskerville Regular.
Долгое время считалось, что шрифт с засечками лучше читается, так как засечки образуют направляющую линию и взгляду удобнее и быстрее скользить вдоль нее.
С появлением первых компьютеров стали распространены шрифты без засечек, так как на экранах с низким разрешением более разборчиво выглядели шрифты простой формы.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» – вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
Как подключить шрифт, которого нет в базовом наборе
Во всех примерах, которые мы приводили выше, использованы шрифты из базового набора. Чтобы их поменять, нужно перейти в настройки сайта и выбрать шрифт из списка. Но кроме этого, на Тильде можно подключить абсолютно любой шрифт, даже если его нет в списке.
Где купить шрифты или найти бесплатные
На Тильде можно подключить шрифт пятью способами:
Выбрать из тех, которые есть в настройках. Мы отобрали 25 хороших шрифтов из открытых источников и от наших партнеров.
Загрузить на Тильду свой файл шрифта. В этом случае его нужно где-то взять, например, купить на:
Paratype
Цена стартует от 300 рублей за шрифт, есть у сервиса и бесплатные начертания.
Каждый месяц бывают распродажи и можно приобрести понравившийся вариант с приятной скидкой.
TypeType
Сервис дает возможность бесплатно использовать понравившийся шрифт в прототипе сайта. Если же вы хотите опубликовать проект с этим шрифтом, нужно оплатить лицензию.
Цена за шрифт от 1000 рублей.
Type.today
Магазин предлагает на выбор множество универсальных шрифтов от современных до более классических вариантов.
Средняя цена 2500 рублей.
Инструкция по загрузке своего файла шрифта на Тильде.
Подключение шрифта к сайту на Тильде
Ни для кого не секрет, что шрифт — один из самых важных составляющих сайта. Именно он, зачастую, может полностью перевернуть дизайн сайта. В поиске вы сможете найти довольно много вариантов шрифтовых пар, как для кириллицы, так и для латиницы.
Давайте вместе рассмотрим всевозможные варианты работы со шрифтами внутри конструктора Тильды.
Чтобы начать работу со шрифтами, для начала нужно перейти в настройки сайта:
Ищите в левой боковой панели вам нужно найти «Шрифт и цвета»:
Переходите и нажимайте на кнопку «Расширенные настройки»:
В открывшемся окне вы найдете вкладки библиотек шрифтов, с помощью которых можно выбрать шрифт или загрузить свой:
О всех вариантах по-порядку.
Стандартные шрифты в Тильде
Во вкладке «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.
Этапы:
- Найдите подходящий шрифт и активируйте его, а затем перейдите на его страницу.
- Нажмите на «Add to Web Project», чтобы добавить шрифт в существующий или новый проект.
- После добавления шрифтов в проект перейдите в настройки проекта.
- Внутри вашего проекта вы можете посмотреть Project ID и название шрифта, которое нужно вставить в Тильду.
- Вернитесь в Тильду, в Настройки сайта → Шрифты и цвета → Расширенные настройки → Typekit.
- Укажите 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 добавить второй ваш шрифт. В настройках блоков вы сможете выбирать нужное начертания и тем самым менять шрифт.»]
Другие настройки шрифтов
Как вы могли заметить, в Настройки сайта → Шрифты и цвета → Расширенные настройки, есть еще несколько важных полей:
Здесь вы можете задать настройки по-умолчанию для всех страниц:
- выбрать начертание шрифта для обычного текста;
- назначить шрифт для текста;
- выбрать начертание шрифта для заголовков
На этой же странице ниже вы сможете задать цвет для заголовков и текста, цвет ссылок и цвет фона для всех блоков.
Если остались еще какие-то вопросы по подключению шрифтов к Тильде, советую пересмотреть видео ниже. В нем я все детально описываю на конкретных примерах.