Как подключить собственный шрифт и правильно назначить веса
Загружайте веб-версию шрифта, а не файл для печати: основной безопасный формат — WOFF, WOFF2 можно добавить рядом. Каждому файлу назначайте его настоящий вес от 100 до 900 и не используйте один файл как Regular, Medium и Bold. После подключения выберите гарнитуру в настройках сайта и опубликуйте проект целиком. Если текст сначала исчезает, проверьте вес и размер файлов до добавления нового кода.
Короткий ответ
Подготовьте WOFF, при желании WOFF2, подпишите каждый файл правильным весом и подключите одно семейство один раз. Затем опубликуйте проект и проверьте страницу без кеша.
Карта весов
Не ориентируйтесь только на имя файла. Спросите у автора шрифта или посмотрите метаданные:
| Название | Обычно |
|---|---|
| Thin | 100 |
| Light | 300 |
| Regular | 400 |
| Medium | 500 |
| Semibold | 600 |
| Bold | 700 |
| Black | 900 |
Если загрузить Medium как 400, браузер начнёт синтезировать или выбирать соседний файл. В макете разница может быть незаметна, а на Windows появится другая ширина строки.
Подключение
Следуйте официальной инструкции Тильды: дайте гарнитуре точное имя, загрузите нужные веса, выберите её в настройках шрифтов и опубликуйте все страницы. Тильда указывает предел до трёх семейств и девяти весов на семейство.
Не загружайте все девять «на всякий случай». Каждый файл — дополнительный запрос и объём. Для большинства клиентских сайтов достаточно Regular, Medium или Semibold и Bold.
Почему текст прыгает или исчезает
Причины по порядку: слишком тяжёлый файл, неверный вес, старый кеш, отсутствие
кириллицы, поздняя загрузка. На сохранённом стенде отсутствие font-display
давало около двух секунд невидимого текста в Chromium; это частный замер, не
гарантия для каждого проекта.
Сначала сократите набор файлов и проверьте начертания. Свой CSS с @font-face
добавляйте только если штатного подключения действительно не хватает: иначе у
одного семейства появятся два конкурирующих описания.
Сдача клиенту
Передайте исходные веб-файлы и документ о лицензии. Запишите, какой вес где используется. Клиент должен иметь возможность поменять заголовок без поиска шрифтов в аккаунте дизайнера.