Why does my @font-face declaration display an incorrect MIME type in Chrome?

'font-face' Declaration Displays Incorrect MIME Type in Chrome

When using the below @font-face declaration:

<code class="css">@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}</code>

it functions flawlessly in Firefox but fails in Chrome. Upon inspecting the element, the following message appears:

Resource interpreted as font but transferred with MIME type application/octet-stream.

To address this cross-browser compatibility issue, consider the versatile @font-face declaration suggested by Paul Irish:

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

This declaration caters to different browsers by offering:

• .eot for Internet Explorer
• .woff or .ttf for other browsers

To generate these font types from the original source, utilize Font Squirrel's font face generator.

Additionally, add an .htaccess file to define the font types:

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

The above is the detailed content of Why does my @font-face declaration display an incorrect MIME type in Chrome?. For more information, please follow other related articles on the PHP Chinese website!