Почему @ font-face бросает ошибку 404 на файлы Woff?

Я использую @font-face на сайте моей компании, и он работает / отлично выглядит. Кроме того, Firefox и Chrome будут .woff ошибку .woff файле .woff . IE не выдает ошибку. У меня есть шрифты, расположенные в корне, но я попытался использовать шрифты в папке css и даже дал весь URL-адрес шрифта. Если удалить эти шрифты из моего css-файла, я не получаю 404, поэтому я знаю, что это не синтаксическая ошибка.

Кроме того, я использовал инструмент fontsquirrels для создания @font-face и кода:

 @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontinSansRegular'; src: url('/fontin_sans_r_45b-webfont.eot'); src: local('☺'), url('/fontin_sans_r_45b-webfont.woff') format('woff'), url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg'); font-weight: normal; font-style: normal; } 

    14 Solutions collect form web for “Почему @ font-face бросает ошибку 404 на файлы Woff?”

    У меня был тот же самый симптом – 404 в файлах woff в Chrome – и выполнялось приложение на Windows Server с IIS 6.

    Если вы находитесь в той же ситуации, вы можете исправить это, выполнив следующие действия:

    Решение 1

    «Просто добавьте следующие объявления типа MIME через диспетчер IIS (вкладка заголовков HTTP свойств веб-сайта): .woff application / x-woff

    Обновление: в соответствии с MIME-типами для woff-шрифтов и Grsmto фактическим типом MIME является application / x-font-woff (по крайней мере, для Chrome). x-woff исправит Chrome 404s, x-font-woff исправит предупреждения Chrome.

    По состоянию на 2017 год : шрифты Woff теперь стандартизированы как часть спецификации RFC8081 для font/woff типа font/woff и font/woff2 .

    Типы MIME IIS 6

    Благодаря Себу Дуггану: http://sebduggan.com/posts/serving-web-fonts-from-iis

    Решение 2

    Вы также можете добавить типы MIME в веб-конфигурацию :

             

    На самом деле ответ @Ian Robinson работает хорошо, но Chrome продолжает жаловаться на это сообщение: « Ресурс интерпретируется как« Шрифт », но передается с помощью приложения типа MIME / x-woff »

    Если вы это сделаете, вы можете перейти от

    применение / х-Уофф

    в

    application / x -font -woff

    и у вас больше не будет ошибок консоли Chrome!

    (проверено на Chrome 17)

    Ответ на этот пост был очень полезен, и большая экономия времени. Тем не менее, я обнаружил, что при использовании FontAwesome 4.50 мне пришлось добавить дополнительную конфигурацию для woff2 типа woff2 как показано ниже. woff2 запросы для типа woff2 давали ошибку 404 в инструментах разработчика Chrome в разделе «Консоль> Ошибки».

    Согласно комментарию S.Serp, приведенная ниже конфигурация должна быть помещена в .

             

    Решение для IIS7

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

    1. Перейдите в корневой узел IIS и дважды щелкните параметр конфигурации «MIME Types»

    2. Нажмите ссылку «Добавить» на панели «Действия» в правом верхнем углу.

    3. Это вызовет диалог. Добавьте расширение .woff и укажите «application / x-font-woff» как соответствующий тип MIME.

    Добавить MIME-тип для расширения имени файла .woff

    Перейти к MIME-типам

    Добавить тип MIME

    Вот что я сделал для решения проблемы в IIS 7

    Запустите диспетчер IIS Server (команда запуска: inetmgr). Откройте Mime Types и добавьте следующие

    Расширение имени файла: .woff

    Тип MIME : приложение / октет-stream

    В дополнение к ответу Яна, я должен был разрешить расширения шрифтов в модуле фильтрации запросов, чтобы он работал.

                      

    Я попробовал массу вещей, связанных с разрешениями, типами mime и т. Д., Но для меня это закончилось тем, что web.config удалил обработчик Static в IIS, а затем явно добавил его обратно для каталогов, которые будут иметь статические файлы. Как только я добавил узел местоположения для моего каталога и добавил обработчик обратно, запросы перестали получать 404.

    Если вы используете CodeIgniter в IIS7:

    В файле web.config добавьте woff в шаблон

            

    Надеюсь, поможет !

    Решил:

    Мне пришлось использовать метод Mo’Bulletproofer

    Это может быть очевидным, но это несколько раз приводило меня в порядок 404s. Убедитесь, что разрешения на папку Fonts установлены правильно.

    Также проверьте URL-адрес перезаписи. Он может выбросить 404, если будет найдено что-то «странное».

    Если у вас нет доступа к конфигурации вашего веб-сервера, вы также можете просто отредактировать файл шрифта, чтобы он закончился в svg (но сохраните формат). Работает отлично для меня в Chrome и Firefox.

    Если все еще не работает после добавления типов MIME, проверьте, включена ли «Анонимная аутентификация» в разделе «Проверка подлинности» на сайте, и обязательно выберите «Идентификатор пула приложений» в соответствии с данным снимком экрана.

    введите описание изображения здесь

    IIS Mime Type: .woff font / x-woff (не приложение / x-woff, или application / x-font-woff)

    Interesting Posts

    Может ли кто-нибудь объяснить мне, как процессор находит источник прерывания в теории ОС?

    Установка изображения UIButton приводит к синей кнопке в iOS 7

    вызывающие сеттеры от конструктора

    Как расширить раздел Linux ext3?

    Ноутбук Lenovo с процессором Intel остается на низких часах

    Как передать lambda-выражение в службу WCF?

    Предложения по шаблонам электронной почты Java?

    Java делает направленную линию и заставляет ее двигаться

    В чем разница между XML-схемой и DTD?

    Casting vs Преобразование объекта toString, когда объект действительно является строкой

    Как я могу условно потребовать ввода формы с помощью AngularJS?

    удалить номер версии в URL-адресе

    Как вызвать функции в модели основного вида из других моделей представлений?

    Windows – удалить пароль, используемый для подключения к общим дискам

    Каков самый быстрый алгоритм факторизации?

    Давайте будем гением компьютера.