Why Won\'t My @font-face Rule Display Fonts in IE9?

@font-face Display Issues in IE9

You're experiencing issues with the @font-face rule not displaying fonts in Internet Explorer 9 (IE9), even though they work in other browsers, including IE8. Additionally, the fonts are visible when viewed locally, but not when the website is hosted live.

The website in question is bigwavedesign.co.uk/gcc/gcc/, and the CSS code used for the @font-face rule is:

<code class="css">@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('league_gothic_0-webfont.eot');
  src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

Apparently, this issue does not appear to be an isolated case, as others have reported similar problems. The key difference between IE9 and other browsers is that IE9 appears to be using the .woff version of the font instead of the .eot version that other browsers use. This led to a solution where the .woff version was included in the project, resulting in the font working correctly in all IE versions.

The following modified @font-face rule includes the .woff version and is reported to resolve the issue:

<code class="css">@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }</code>

By including the .woff version in the @font-face rule, it is possible to ensure that the font displays correctly in IE9 while maintaining compatibility with other browsers.

The above is the detailed content of Why Won't My @font-face Rule Display Fonts in IE9?. For more information, please follow other related articles on the PHP Chinese website!