Настройка шрифтов для сайта
Шрифты задаются в настройках сайта. Это значит, что параметры (гарнитура, насыщенность, размер, цвет) будут применятся глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Чтобы перейти к настройке шрифтов сайта, перейдите в Настройки сайта → Шрифты и цвета.
Вы увидите галерею шрифтов. Ее можно пролистать и задать шрифт для сайта, нажав на кнопку «Выбрать». Шрифт будет назначен для заголовков и для текста.
Если вы хотите использовать сторонний шрифт или использовать разные шрифты для заголовка и текста, то нажмите на кнопку «Расширенные настройки».
На вкладке Библиотека вы можете выбрать разные шрифты для заголовков сайта и для основного текста. В коллекции находятся более 20 стандартных и премиум-шрифтов от партнеров, которые предоставляются бесплатно при подписке на Тильду.
На вкладках Google Fonts, Adobe Fonts и Загрузить шрифт вы можете загрузить шрифт из внешнего источника. Прочитайте подробные статьи ниже:
Коллекция бесплатных шрифтов от Google
Перейти к инструкции
Абсолютно любой шрифт в форматах .woff и .woff2
Перейти к инструкции
Большая библиотека компании Adobe
Перейти к инструкции
Добавление ссылки на CSS-файл на стороннем сервере
Перейти к инструкции
Установка размеров и шрифтов заголовка и текста сайта
Внизу настроек установки шрифта на вкладке «Шрифты и цвета» располагаются настройки стандартного размера, насыщенности и цвета заголовков и текста. Данные параметры устанавливаются глобально ко всем стандартным блокам на сайте, если в них жестко не установлены другие настройки шрифтов.
В стандартных блоках вы можете указать параметры шрифта в настройках блока → Типографика или выделить текст в редакторе и поменять его параметры через верхнюю панель настроек шрифта.
Установка параметров шрифтов через панель настройки текста в редакторе
Установка параметров текстовых элементов через настройки блока → Типографика
Настройки подгрузки шрифтов
По умолчанию текст сайта показывается после того, как подгрузится файл шрифта, это может происходить с определенной задержкой в зависимости от скорости соединения.
В настройках сайта → Шрифты и цвета → Продвинутые настройки вы можете установить настройку показа системного шрифта при загрузке, чтобы текст показывался сразу, но сначала системным шрифтом, а потом тем, который вы выбрали. Это может вызывать короткое мерцание текста и изменение размера текстовых элементов, поэтому используйте эту настройку только если уверены, что так ваш сайт выглядит лучше при загрузке.
Как загрузить свой файл шрифта
Вы можете загрузить один свой шрифт в настройках сайта. Подготовьте файлы шрифта для разных насыщенностей (light, regular, bold) в формате WOFF и WOFF2.
Формат 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).
Перейдите в настройки сайта → Шрифты и цвета и нажмите на кнопку «Расширенные настройки».
Перейдите на вкладку «Your Own Font» и нажмите на кнопку «Загрузить файлы шрифта».
Загрузите файлы формата .woff для всех начертаний шрифта.
Доступны все 9 возможных значений толщины, чтобы открыть все, нажмите на ссылку «Показать больше толщин».
Укажите полное название шрифта и назначьте его шрифтом для текста или заголовков. Сохраните изменения.
Обязательно проверьте, что на вкладке Your Own Font прописано корректное название шрифта.
Дополнительные настройки: формат WOFF2, вариативный шрифт
При загрузке файлов шрифта вы можете дополнительно загрузить шрифты в формате .woff2. Это новый и более легкий формат, который будет использоваться, если браузер его поддерживает. Сейчас этот формат поддерживается некоторыми версиями браузеров (посмотреть таблицу совместимости).
Если вы загрузите шрифт в данном формате, то он будет загружаться только в случае, если браузер посетителя его поддерживает, поэтому мы рекомендуем использовать этот формат в связке с woff. Чтобы загрузить файлы в этом формате, на странице загрузки шрифтов нажмите на ссылку «Загрузить файлы в формате .woff2».
Вариативный шрифт — это один файл для бесконечного количества вариаций начертаний шрифта от самого тонкого до самой толстого начертания. Сейчас этот формат файла также поддерживается только в современных браузерах (посмотреть таблицу совместимости).
Если вы загрузите такой файл, то он будет использоваться только у посетителей, браузеры которых поддерживают работу с вариативными шрифтами. Чтобы загрузить этот файл, на странице загрузки шрифтов нажмите на ссылку «Загрузить вариативный шрифт».
Почему у меня не отображаются шрифты?
Если на сайте часть текста выводится правильным шрифтом, а часть другим, типа Times, вероятнее всего проблема в том, что неправильный шрифт был назначен вручную при редактировании.
Почему так?
Скорее всего вы редактировали текст и указывали шрифт вручную (через верхнюю панель редактирования) для части текста. Например, это был Open Sans.
Затем вы решили в настройках сайта поменять шрифт на PT Sans. В блоках, где шрифт не был указан вручную, все стало отображаться новым шрифтом. Но вы-то при редактировании текста в некоторых блоках указали жестко что этот текст будет Open Sans. А шрифт больше не подгружается, вместо него — шрифт по умолчанию, Times. Поэтому надо сбросить весь «жесткий» стиль текста.
Что делать?
Нужно сделать так: выбрать блок в котором шрифт не отображается, войти в режим редактирования текста, выделить все. Выбрать «Remove Font Family». Или нажать на крайнюю правую кнопку — «очистить все стили». Переопубликовать страницу.
Почему не отображаются шрифты?
Проблема с отображением может возникнуть, если при редактировании блока вручную назначили другой шрифт.
Поэтому в блоке сбрасываются настройки и устанавливается шрифт по умолчанию.
Подробнее о проблеме
Например, изначально в настройках сайта (раздел «Шрифты и цвета») вы установили шрифт Roboto. Затем в блоке выделили текст и в появившемся контекстном меню вручную указали этот шрифт.
После этого в настройках сайта поменяли шрифт на Open Sans. В блоках, где шрифт не был указан вручную, текст стал отображаться новым шрифтом. Но в блоках, в которых он был задан вручную, возникает проблема. Это произошло из-за того, что предыдущий шрифт больше не подключен к сайту.
Важно: настройки, заданные вручную в контекстном меню, могут конфликтовать с другими настройками типографики
Как исправить проблему
Необходимо перейти к блоку → нажать на любое место в тексте → шрифт автоматически изменится на добавленный.
Сбросить настройки шрифта можно и вручную, для этого выберите пункт «Очистить шрифт» в выпадающем меню или нажмите «Очистить стили» на панели редактирования.
Проблемы и способы решения в зависимости от метода подключения шрифта
Шрифт подключен с помощью файла CSS, но не отображается
Возможные проблемы при подключении своего шрифта через загрузку файлов
Возможные проблемы со стандартными шрифтами
При открытии сайта сначала загружается системный шрифт
Шрифт подключен с помощью CSS-файла
Убедитесь, что вы указали корректное название шрифта в настройках сайта.
Название шрифта (font-family) должно совпадать с данными из CSS-файла: настройки сайта → раздел «Шрифты и цвета» → вкладка «Загрузить шрифт».
Важно: при подключении шрифта через CSS-файл нужно удостовериться, что сервер, с которого подключается шрифт, поддерживает Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *). Как установить эту настройку на сервере, указано в инструкции для подключения своего файла CSS
Шрифт подключен с помощью Google Fonts
При добавлении шрифта важно, чтобы название шрифта в настройках сайта совпадало с названием шрифта в Google Fonts.
Помимо этого обязательно проверьте ссылку на CSS-файл Google Fonts, она должна выглядеть так:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
Шрифт загружен файлами
Убедитесь, что под загруженными woff-файлами вы указали полное официальное название шрифта. Это же название должно быть указано для Заголовков и/или Текста в Настройках сайта → Шрифты и цвета.
Если шрифт корректно отображается на латинице, но на кириллице возникают проблемы, то стоит проверить, поддерживает ли шрифт кириллические символы. Эту информацию можно получить на стороне сервиса, в котором вы приобрели шрифт.
Также при конвертации некоторые сервисы могут портить кириллическую версию. Это можно проверить в сервисе FontDrop!. Для конвертирования рекомендуем воспользоваться WOFFer.
Шрифт добавлен из библиотеки шрифтов
Проблема с базовыми шрифтами может наблюдаться на экспортированных проектах.
На Тильде часть шрифтов берется из библиотеки сервисов Paratype и type.today, которые предоставляют шрифты по партнерскому соглашению.
- Circe (и Circe Rounded)
- Mediator (и Mediator Serif)
- Futura PT:
- Reforma Grotesk
- Graphik
- Kazimir
Шрифт долго загружается
Чтобы файл шрифта загрузился, требуется время. На скорость загрузки влияет качество используемого интернет-подключения и количество контента на странице сайта.
Чтобы страница не тормозила и посетитель не ждал, сначала загружается самое важное — контент, а потом вспомогательные компоненты. Поэтому вы можете видеть системные шрифты до того, как загрузился ваш шрифт.
Воспользуйтесь блоком «Эффект загрузки страницы» (Т228, категория «Другое»). Он замедлит появление контента и текст будет отображаться с загруженными шрифтами.
Если при открытии сайта в браузере вы наблюдаете «мерцание» — сначала загружается системный шрифт, потом ваш собственный — это не ошибка, а нормальное поведение.
Назначаем проекту шрифты или подключаем собственные, используя Google Fonts, Adobe Fonts или внешний CSS файл