Why is My Custom Font Displaying in Firefox but Not Chrome?

Chrome Not Displaying Custom Font: MIME Type Mismatch

Issue:

A custom font declaration using @font-face is displaying correctly in Firefox but failing in Chrome. Chrome reports an error: "Resource interpreted as font but transferred with MIME type application/octet-stream."

Answer:

Different browsers have varying font support. To ensure cross-browser compatibility, use a comprehensive @font-face declaration that includes multiple font formats:

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

The .eot format is for Internet Explorer, while the rest of browsers use .woff or .ttf. Generate the different font formats using Font Squirrel's font-face generator if necessary.

Furthermore, add an .htaccess file to the directory where the fonts are located and include the following MIME 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 is My Custom Font Displaying in Firefox but Not Chrome?. For more information, please follow other related articles on the PHP Chinese website!