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:

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

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:

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

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