Why is My @font-face Not Working in IE9 on a Live Site?

Debugging @font-face Issues in IE9

Despite functioning seamlessly in IE8 and other browsers, @font-face encounters display difficulties in IE9. This problem arises specifically on the live site, whereas local viewing on the user's computer does not present any issues.

The CSS code in question is:

@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;
}

A similar problem has been reported, with the font functioning in all IE versions except IE9. However, changing the Document Mode (via the F12 developer tools) resolves the issue, albeit not ideally.

Update:

Investigation has revealed that IE9 utilizes the .woff font variation instead of the intended .eot version. By including the complete font variations generated by the fontsquirrel @font-face generator and using the smileyface-local technique, the issue has been resolved:

@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");
  }

h1 { font-family: "LucidaFax-bold", serif;}

Additionally, the Mark "Tarquin" Wilton-Jones text-shadow hack has been employed to achieve consistent visual styling across IE versions.

The above is the detailed content of Why is My @font-face Not Working in IE9 on a Live Site?. For more information, please follow other related articles on the PHP Chinese website!