Прямая ссылка на шрифт (woff, woff2) для сайта

Чтобы поставить на сайт свой шрифт, браузеру нужен файл шрифта по прямой ссылке — обычно в формате woff2 или woff. Просто загрузить шрифт на облачный диск не выйдет: он отдаёт страницу-обёртку, а не сам файл, да ещё и без нужных заголовков. Разберём, как правильно залить шрифт и получить прямую ссылку, которая заработает в @font-face.

Почему шрифту нужна именно прямая ссылка

Когда вы подключаете шрифт через CSS, браузер обращается по адресу файла и ожидает получить сам файл шрифта — байты woff2, а не HTML-страницу. Если ссылка ведёт на просмотрщик облачного диска, браузер получает не то, что ждёт, и шрифт не применяется. Поэтому нужна ссылка, которая отдаёт файл напрямую и с правильным типом содержимого.

Какой формат выбрать: woff2 или woff

На практике достаточно woff2 — он самый лёгкий и поддерживается везде. Формат woff можно добавить запасным вариантом, если нужна совместимость со старыми браузерами. Если у вас есть только ttf или otf, их стоит сконвертировать в woff2 любым онлайн-конвертером — сайт будет грузиться быстрее.

Как получить прямую ссылку на шрифт

1. Загрузите файл шрифта (woff2 или woff) на файловый хостинг.
2. Скопируйте прямую ссылку на файл — она должна заканчиваться на .woff2, а не вести на страницу просмотра.
3. Вставьте ссылку в правило @font-face в CSS вашего сайта.

Как подключить шрифт через @font-face

В CSS сайта (в Tilda — в блоке T123 или в настройках проекта) добавьте правило и подставьте свою ссылку:

@font-face {
  font-family: 'MyFont';
  src: url('https://lfdrive.ru/f/ВАШ_КОД.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Замените адрес на свою прямую ссылку, а MyFont — на название шрифта.

После этого шрифт можно применять к любому элементу: font-family: 'MyFont', sans-serif;. Свойство font-display: swap сделает так, что текст покажется сразу запасным шрифтом и не «пропадёт», пока грузится ваш.

Почему облачный диск не подходит

Яндекс.Диск, Google Диск и подобные сервисы отдают страницу просмотра, а не файл шрифта, и не выставляют CORS-заголовки. Даже если вытащить «прямую» ссылку хитрым способом, она нестабильна и может перестать работать. Для шрифта, который должен грузиться на каждой странице сайта годами, нужен предсказуемый файловый хостинг, а не костыль поверх облака.