This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems.
One specific client has their own custom font files that are causing trouble. The application in question is embedded in an iframe on the main site, but all domains and subdomains match between the main page, iframe, and font file.
Upon the initial loading of the page, the custom font displays correctly. However, upon refreshing the page, the font reverts to the fallback "Sans-Serif" font and the letter spacing becomes distorted.
The issue affects all three separate font files being used, leading me to believe it may be a caching problem. The fact that the font initially displays correctly suggests that the file itself is fine, the reference paths are accurate, and there are no domain security issues.
We are using the CSS generated by Font Squirrel for embedding the font. So far, I have only tested this on IE8, but have been informed that IE9 experiences the same problem. Other browsers seem unaffected by the font display issue.
I am unable to disclose which site this problem is occurring on.
@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)
Thank you!