Почему @ font-face выдает ошибку 404 в файлах woff?

Question

Я использую @font-face на сайте моей компании, и он работает / выглядит великолепно.За исключением Firefox и Chrome выдает ошибку 404 в файле .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;
}

Answer 1

Я испытывал этот же симптом - 404 для файлов woff в Chrome - и запускал приложение на Windows Server с IIS 6.

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

Решение 1

"Просто добавьте следующие объявления типов MIME через IIS Manager (вкладка« Заголовки 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 для типа MIME font/woff и font/woff2.

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

Решение 2

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

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

Answer 2

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

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

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

Answer 3

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

Если выполучить это, вы можете изменить с

application / x-woff

на

application / x -font -woff

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

(протестировано на Chrome 17)

Answer 4

Решение для IIS7

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

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

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

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

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

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

Answer 5

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

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

Answer 6

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

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

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

Answer 7

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

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

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

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

Answer 8

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

Answer 9

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

Answer 10

IIS MIME-тип: .woff font / x-woff (не application / x-woff или application / x-font-woff)