Предупреждение Google: ресурс, интерпретируемый как шрифт, но переданный с помощью приложения типа MIME/октетного потока

У меня есть предупреждение в Google для моего шрифта:

Ресурс, интерпретируемый как шрифт, но переносимый с помощью приложения MIME-типа/октетного потока: ".../Content/Fonts/iconFont.ttf".

Он работает, даже если у меня есть это предупреждение, но я предпочитаю избегать этого предупреждения.

Вот мое выражение:

@font-face {
  font-family: 'iconFont';
     src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), 
     url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), 
     url('../Fonts/iconFont.woff') format('font/x-woff'), 
     url('../Fonts/iconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Я уже просматриваю другие сообщения, но пока не повезло.

Обратите внимание, что мой сервер является IIS от Microsoft.

Любая идея, как я могу избежать этого предупреждения?

Спасибо.

Ответ 1

другой подход: http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/

используйте настройки на вашем web.config ниже:

<system.webServer>
<staticContent>
  <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
</staticContent>
</system.webServer>

Ответ 2

Вам нужно добавить следующие типы в .htaccess/IIS:

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

Обновлен .woff тип от:

AddType application/x-font-woff .woff

(Спасибо @renadeen в комментариях ниже, указав это.)

Посмотрите мой ответ на аналогичный вопрос здесь: Font Face не загружен

Взято отсюда: проблема с шрифтом в chrome.

Ответ 3

Спасибо за приведенный выше ответ @97ldave, вы можете добавить эти типы в свой раздел конфигурации IIS webServer, если не хотите добавлять их непосредственно к вашим типам MIME в настройке IIS. Ниже приведен пример добавления только того типа .woff, который отсутствовал в нашей конфигурации. Это устранило проблемы с шрифтами, не появляющимися в последней версии Safari (6.0.3) на моем iMac.

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

Спасибо Jon Samwell (мой коллега) за то, что вы узнали об этом.

Ответ 4

Для Nginx: (Путь:/etc/nginx/mime.types)

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;

Вам не нужно application/vnd.ms-fontobject eot; потому что он уже существует.

После этого перезапустите Nginx: service nginx restart

Готово.

Ответ 5

Правильные типы MIME для шрифтов:

application/font-ttf              ttf;
application/font-otf              otf;
application/font-woff             woff;

Ответ 6

Если вы запустите сервер с nodeJS, это хороший модуль для сопоставления типов mime

https://github.com/broofa/node-mime

var mime = require('mime');

mime.lookup('/path/to/file.txt');         // => 'text/plain'
mime.lookup('file.txt');                  // => 'text/plain'
mime.lookup('.TXT');                      // => 'text/plain'
mime.lookup('htm');                       // => 'text/html'

mime.extension('text/html');                 // => 'html'
mime.extension('application/octet-stream');  // => 'bin'

Ответ 7

Спасибо @the-senator и @97ldave за их ответы

для меня ошибка полностью исчезает сразу после добавления этих строк в web.config

<system.webServer>
<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font" />
    </staticContent>
</system.webServer>