Не работает шрифт тильда

Почему не отображаются шрифты?

Убедитесь, что вы указали корректное название шрифта в настройках сайта.

Название шрифта (font-family) должно совпадать с данными из CSS-файла: настройки сайта → раздел «Шрифты и цвета» → вкладка «Загрузить шрифт».

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

Также при конвертации некоторые сервисы могут портить кириллическую версию. Это можно проверить в сервисе FontDrop!. Для конвертирования рекомендуем воспользоваться WOFFer.

Проблема с базовыми шрифтами может наблюдаться на экспортированных проектах.

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

На данный момент это шрифты:

Futura PT
Opinion Pro
Circe (и Circe Rounded)
Iskra
Orchidea Pro
Kazimir Text
Mediator (и Mediator Serif)
Reforma Grotesk

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

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

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

Воспользуйтесь блоком «Эффект загрузки страницы» (Т228, категория «Другое»). Он замедлит появление контента и текст будет отображаться с загруженными шрифтами.

Источник

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

Формат WOFF поддерживается всеми браузерами. Если у вас есть шрифт, но в формате EOT или TTF, вам нужно конвертировать их в WOFF c помощью онлайн-конвертора.

Всего вы можете загрузить 9 файлов начертаний одного шрифта: Thin (100), Extra Light (200) Light (300), Normal (400), Medium (500), Semi-Bold (600), Bold (700), Extra Bold (800), Black (900).

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

Если вы загрузите шрифт в данном формате, то он будет загружаться только в случае, если браузер посетителя его поддерживает, поэтому мы рекомендуем использовать этот формат в связке с woff. Чтобы загрузить файлы в этом формате, на странице загрузки шрифтов нажмите на ссылку «Загрузить файлы в формате .woff2».

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

Если вы загрузите такой файл, то он будет использоваться только у посетителей, браузеры которых поддерживают работу с вариативными шрифтами. Чтобы загрузить этот файл, на странице загрузки шрифтов нажмите на ссылку «Загрузить вариативный шрифт».

Источник

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

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

Переходим в Настройки сайта — Шрифты и цвета — Расширенные настройки.
Выбираем вкладку Your Own Fonts.

Здесь Тильда предлагает загрузить имеющиеся у Вас файлы шрифтов обязательно в формате WOFF. Обратите на это внимание.

Кроме того, есть возможность в поле CSS LINK указать ссылку на файл стилей в том случае, если Ваши шрифты находятся где-то на другом сервере, хостинге, и в саму Тильду Вы их загружать не планируете. А просто хотите подключить к сайту этот указанный сторонний файл стилей.

Предполагаем, что Вы уже заранее подготовили необходимые файлы, скачав их с одного из сервисов, предлагающих бесплатные или платные наборы шрифтов. Если нет, то сделайте это, воспользовавшись поиском в Яндексе или Гугле с поисковой фразой типа Скачать шрифты. Это просто. Даже если у Вас файлы в другом формате, ничего страшного, Тильда предложит инструкцию по их конвертации в необходимый формат. Это видно на картинке ниже.

Итак, нажимаем на кнопку Загрузить файлы шрифта, видим окошко, в котором нужно последовательно подгрузить шрифты для каждого начертания (толщины шрифта).

Обратите внимание, бывают ситуации, когда нужно подгрузить два разных шрифта. Здесь это возможно сделать. Поля для загрузки названы по начертаниям шрифта. Но это вовсе Вас не обязывает загружать сюда именно один шрифт именно указанных начертаний. Скорее всего, какие-то начертания шрифта Вам вовсе не нужны, но пригодился бы второй-третий шрифт. Не проблема — какие начертания основного шрифта Вам не пригодились, те поля используйте для загрузки необходимого Вам другого шрифта любых начертаний. В таком случае, Вам необходимо просто запомнить, в какое начертание какой шрифт Вы подгрузили, чтобы в дальнейшем использовать их при создании сайта.

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

Также здесь сразу можете назначить загруженный шрифт для заголовков или для текста. А может, и не надо, если у нас несколько шрифтов.

Сохраняете. Готово.
Используйте свои собственные шрифты в работе.

Спасибо, что дочитали статью до конца! Надеюсь, была полезна.
Желаю Вам успехов в Вашем творчестве!

Источник

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

Источник

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

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

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

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

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

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

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

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

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

Во вкладке «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 добавить второй ваш шрифт. В настройках блоков вы сможете выбирать нужное начертания и тем самым менять шрифт.»]

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

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

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

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

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

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

Источник