IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh <p>UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: <a href="http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8">http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8</a></p> <p>I have a page where I'm using @font-face to import a custom font for icons. The icons are created with a class:</p> <pre><code>.icon {font-family: 'icon-font';} .icon:before {content: 'A';} </code></pre> <p>And voila, I have whatever icon is used for "A". Pretty standard stuff, works in all browsers, including IE8. </p> <p>However, in IE8, I have a bizarre bug. When the page loads, the font is not working. Instead of icons, I have letters all over the place. Once I hover OVER the page (body), half the letters become icons. The rest become icons when I hover over them. </p> <p>SO the font-face is embedding properly. The font-family and content properties are both working, but something else is causing the icons to load only after hover.</p> <p>So there's some sort of bug with @font-face in IE8 when you try to use the font with :before{content: 'a'} but I have no idea what the bug is.</p> <p>I've searched for hours on here for a similar bug/IE8 issue/anything, but I've had no luck and I'm about to go crazy. ANY suggestions? </p> <p>Let me know if I can provide anymore info that might be helpful. </p> <p>EDIT: Updated the broken link to the blog post.</p>