Неправильный тип MIME для @font-face в Chrome

При попытке реализовать собственный шрифт с помощью объявления @font-face в Chrome , разработчики могут столкнуться с сообщением об ошибке «Ресурс интерпретируется как шрифт, но передается с MIME-типом application/octet-stream». Эта проблема возникает из-за несоответствия между MIME-типом файла шрифта и ожидаемым типом, указанным в объявлении.

Чтобы устранить это несоответствие, можно использовать комплексное объявление @font-face, отвечающее различным требованиям браузера. . Следующее кроссбраузерное объявление обеспечивает совместимость как с Chrome, так и с Firefox:

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

Файл .eot предназначен для Internet Explorer, тогда как другие браузеры используют форматы .woff или .ttf. Чтобы сгенерировать эти различные форматы из исходного шрифта, рассмотрите возможность использования генератора шрифтов Font Squirrel.

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

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

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