Решение ошибки "Failed to decode downloaded font" в CSS

Быстрый ответ

Если обнаружили ошибку "Не удалось декодировать загруженный шрифт", прежде всего проверьте корректность настройки MIME-типов на сервере и правильность установки CORS-параметров для Apache. Ниже представлены актуальные MIME-типы для шрифтов:

• .woff → application/font-woff
• .woff2 → application/font-woff2
• .eot → application/vnd.ms-fontobject
• .ttf → font/truetype
• .otf → font/opentype

Для настройки CORS воспользуйтесь следующими директивами в файле .htaccess:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "YOUR-DOMAIN.com"
</FilesMatch>

Также стоит заменить YOUR-DOMAIN.com на ваш действительный домен, при этом старайтесь избегать символа * в интересах безопасности.

Проверьте также целостность файлов шрифтов и обращайте внимание на то, что при передаче через FTP используется бинарный режим – это позволит избежать повреждения данных и обеспечит корректное отображение @font-face в CSS.

Проверка целостности файлов шрифтов

Регулярно проводите проверку целостности файлов шрифтов:

• Для вычисления хеш-суммы файлов рекомендуется использовать md5sum или аналогичный инструмент.
• "Бинарный режим" при использовании FTP обеспечивает передачу файлов без изменений.

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

Правильное использование @font-face

Проверьте, что CSS-правило @font-face ссылается на подходящие файлы шрифтов, а также корректно указывает абсолютные пути и расширения файлов.

@font-face {
  font-family: 'RobotoRegular'; /* Или 'ComicSans', если вы любите эксперименты */
  /* Указывайте полные пути и форматы – это важно, как адрес и индекс для письма */
  src: url('fonts/Roboto-Regular.woff2') format('woff2'),
       url('fonts/Roboto-Regular.woff') format('woff');
}

Вместо Comic Sans предлагаю использовать Roboto.

Правильная подача шрифтов через настройки сервера

Точн так же, как и в отличном ресторане, ваш сервер должен корректно "подавать" файлы шрифтов. Вот как настроить MIME-типы в конфигурации сервера:

types {
  /* Декорирование, или правильная подача woff, woff2, eot, otf и ttf */
  font/woff2 woff2;
  font/woff woff;
  application/vnd.ms-fontobject eot;
  font/opentype otf;
  font/truetype ttf;
}

При необходимости обновите файлы nginx.conf и mime.types, чтобы обеспечить возможность проследить путь к директории шрифтов и добавить отсутствующие MIME-типы.

Визуализация

Можно представить проблемы со шрифтами по аналогии с недоставленными посылками:

📦 = Файл шрифта
🏠 = Ваш сайт
🚚 = Объявление @font-face в CSS

Ситуация: 🚚 (курьер) не может доставить 📦 (посылку) на 🏠 (ваш адрес) из-за некорректного адреса (пути файла) или плохо выполненной упаковки (неправильного формата файла).

🚚💨 -> 📮 ❌ -> 🏠 (Ошибка: Не удалось декодировать)

Для успешной доставки пакета:

1. У 🚚 должен быть точный адрес (проверьте путь в CSS).
2. 📦 должен быть качественно упакован (выбран правильный формат файла).

🚚💨 -> 📮 ✅ -> 🏠 (Идеальное отображение шрифта!)

Теперь шрифты будут красоваться на вашем сайте как самые яркие эмодзи! 🦄

Отладка с помощью инструментов разработчика браузера

Инструменты разработчика браузера незаменимы при решении проблем со шрифтами:

• Следите за HTTP-статусами, которые могут указывать на ошибки при запросах к файлам шрифтов.
• Обращайте внимание на предупреждения в консоли о возможных проблемах со шрифтами.
• Используйте вкладку "Сеть" для отслеживания поведения запросов шрифтов и отсеивания проблем с CORS.

Очистите кэш, избавьтесь от проблем

Если одна и та же ошибка со шрифтами возникает снова и снова, возможно, дело в кэше браузера. Очистите его, чтобы записи из прошлого не влияли на текущее состояние вещей.

Поиск других источников шрифтов

Если вам не принципиально использовать именно тот, который вызывает проблемы, попробуйте Google Fonts – там вы, скорее всего, найдёте подходящие шрифты для вашего проекта.

Полезные материалы

1. @font-face – CSS: Каскадные таблицы стилей | MDN — Подробное руководство по использованию шрифтов.
2. Начало работы с Google Fonts API | Разработчики Google — Официальная документация по Google Fonts API.
3. Создайте свои собственные комплекты @font-face » Font Squirrel — Онлайн-утилита для создания индивидуального набора шрифтов.
4. CSS Fonts Module Level 3 — Официальная документация W3C по использованию шрифтов.
5. Can I use... Support tables for HTML5, CSS3, etc — Обзор по поддержке @font-face в разных браузерах.
6. GitHub – bramstein/fontfaceobserver: Загрузка веб-шрифтов. Просто, мало и эффективно. — Инструмент для мониторинга загрузки шрифтов.