"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Why is My @font-face Not Working in IE9 on a Live Site?

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

Posted on 2025-03-22
Browse:589

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.

Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3