How to Achieve Cross-Browser Compatibility with @font-face and Correct MIME Types?

Cross Browser @font-face with Correct MIME Types

When using the @font-face rule to embed fonts, specifying the correct MIME type is crucial for proper rendering acrossbrowsers. In this case, Chrome displays an error due to incorrect MIME type.

To address this, let's examine a cross-browser compatible @font-face declaration:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

• .eot for IE: IE requires the .eot file format.
• .woff or .ttf for Other Browsers: Other browsers support either .woff or .ttf.

To generate these font formats from the source font, use Font Squirrel's font-face generator.

Additionally, an .htaccess file is required to specify the MIME types for the font formats:

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

By implementing these changes, the @font-face rule will correctly embed fonts in both Firefox and Chrome, ensuring consistent rendering acrossbrowsers.

The above is the detailed content of How to Achieve Cross-Browser Compatibility with @font-face and Correct MIME Types?. For more information, please follow other related articles on the PHP Chinese website!