This is the first time I've seen this happen with a custom font embed. For reference, I have dozens of client sites using custom fonts without issue.
This particular client has their own created custom font files. The application in question lives, unfortunately, in an iframe on the main site (domains/subdomains match though, between the main page, iframe and font file).
When the page loads fresh the first time, the font displays beautifully. As soon as I refresh the page, the font is destroyed: it reverts to the fallback ("Sans-Serif") font, and the letter spacing is all jacked up.
There are 3 separate font files being used, all displaying the same behavior. I believe this is a caching issue. The initially correct display of the font suggests the file is alright, that the reference paths are correct, and that the domain security is not a problem.
We're using the font-squirrel generated css for the embed. I've only tested on IE8 so far, though I have been told IE9 has the same issue. Other browsers do not appear to have any issues with the fonts.
I cannot share what site this is for, unfortunately.
@font-face {
font-family: 'myfont70';
src: url('../font/myfont-070.eot');
src: url('../font/myfont-070.svg#myfont70') format('svg'),
url('../font/myfont-070.eot?#iefix') format('embedded-opentype'),
url('../font/myfont-070.woff') format('woff'),
url('../font/myfont-070.ttf') format('truetype'),
url('../font/myfont-070.svg#myfont70') format('svg');
font-weight: normal;
font-style: normal;
}
(the dual declaration for SVG is intentional)
Thanks!
This is specifically caused by being held in an iframe in IE. The solution is to refresh the href on the css tag that declares the font families. This isn't ideal, as it triggers a reload of the css and the fonts flash to their fallback momentarily.
If anyone has a better solution, I'm all eyes.