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

У мене спостерігався цей самий симптом - 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 404, x-font-woff виправить попередження Chrome.

Станом на 2017 рік : шрифти Woff тепер стандартизовані як частина специфікації RFC8081 до типу mime font/woffта font/woff2.

Завдяки Seb Duggan: 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>

Відповідь на цю публікацію була дуже корисною та великою економією часу. Однак я виявив, що під час використання 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>

Насправді відповідь @Ian Robinson працює добре, але Chrome продовжить скаржитися на таке повідомлення: " Ресурс інтерпретується як шрифт, але передається за допомогою програми MIME / x-woff "

Якщо ви отримаєте це, ви можете змінитись

додаток / x-woff

до

застосування / х -font -woff

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

(тестовано на Chrome 17)

Рішення для IIS7

Я також натрапив на те саме питання. Я думаю, що робити цю конфігурацію з серверного рівня було б краще, оскільки це стосується всіх веб-сайтів.

1. Перейдіть до кореневого вузла IIS та двічі клацніть на параметр конфігурації "Типи MIME"

2. Натисніть посилання "Додати" на панелі "Дії" у верхньому правому куті.

3. Це відкриє діалог. Додайте розширення файлу .woff та вкажіть "application / x-font-woff" як відповідний тип MIME.

Додати тип MIME для розширення імені файлу .woff

Ось що я зробив, щоб вирішити проблему в IIS 7

Окрім Ian відповіді, я повинен був дозволити розширення шрифту в модулі фільтрації запитів, щоб він працював.

<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>

Запустіть IIS Server Manager (запустіть команду: inetmgr) Відкрийте типи Mime та додайте наступні

Розширення назви файлу: .woff

Тип MIME : додаток / октет-потік

Я спробував багато речей навколо дозволів, типів mime тощо, але для мене вийшло так, що web.config видалив обробник файлів статичних даних у IIS, а потім явно додав його назад до каталогів, у яких були статичні файли. Щойно я додав у свій каталог вузол розташування для свого каталогу та додав обробник назад, запити перестали отримувати 404s.

Якщо ви використовуєте 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>

Сподіваюся, це допомагає!

Це може бути очевидним, але це кілька разів мене спрацьовувало з 404s ... Переконайтеся, що дозволи дозволу на папки шрифтів встановлені правильно.

Також перевірте свій переписувач URL-адрес. Він може кинути 404, якщо було знайдено щось "дивне".

Якщо у вас немає доступу до конфігурації вашого веб-сервера, ви також можете просто ПОЗНАЧИТИ файл шрифту, щоб він закінчувався у svg (але зберігав формат). Для мене добре працює в Chrome і Firefox.

Якщо після додавання типів MIME все ще не працює, перевірте, чи ввімкнено функцію "Анонімна автентифікація" в розділі "Аутентифікація" на сайті та переконайтесь, що вибрано "Ідентифікація пулу програм" відповідно до даного знімка екрана.

Тип міми IIS: шрифт .woff / x-woff (не додаток / x-woff, або додаток / x-font-woff)

Вирішили це:

Довелося використовувати метод Mo'Bulletproofer