Why am I Getting \"Resource interpreted as font but transferred with MIME type application/octet-stream\" in Chrome When Using @font-face?

Incorrect MIME Type for @font-face in Chrome

When attempting to implement a custom font using the @font-face declaration in Chrome, developers may encounter an error message indicating "Resource interpreted as font but transferred with MIME type application/octet-stream." This issue stems from a mismatch between the MIME type of the font file and the expected type specified in the declaration.

To resolve this discrepancy, a comprehensive @font-face declaration can be employed that caters to different browser requirements. The following cross-browser declaration ensures compatibility with both Chrome and Firefox:

<code class="css">@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}</code>

The .eot file is designated for Internet Explorer, while other browsers utilize either .woff or .ttf formats. To generate these different formats from your source font, consider leveraging Font Squirrel's font-face generator.

Additionally, an .htaccess file should be configured to specify the relevant MIME types for the font files:

<code class="htaccess">AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff</code>

By following these recommendations, you can ensure that your custom font is properly displayed across various browsers, including Chrome.

The above is the detailed content of Why am I Getting \"Resource interpreted as font but transferred with MIME type application/octet-stream\" in Chrome When Using @font-face?. For more information, please follow other related articles on the PHP Chinese website!