CSS Custom Font in IE changes on refresh

Question

I have got a custom font that i am using in CSS, converted in to EOT, WOFF and TTF to work in all browsers

It works perfectly except in, yes you guessed it, IE. It does work but in my IE8 when i refresh the font seems to change in height which throws all the spacing out... Can anyone see the problem or confirm that its not just my browser ?

http://www.uniquegeeks.co.uk/djeurope/

even when you click refresh ??? on mine it keeps changing font height... — Lee, Jul 25 '11 at 13:26
Looks fine to me in IE8, even on a refresh. Although the top line of the lorem seems to get clipped a bit if I reduce the page width until a horizontal scrollbar appears. But that's the only problem I'm seeing. — Matt Gibson, Jul 25 '11 at 14:11

score 3 · Answer 1 · edited Jun 20 '12 at 18:24

3

My and my coworkers were fumbling over the same bug. Our environment ran in a Facebook frame. Upon first loading the page (with empty cache), the fonts rendered fine, but after a simple refresh, the fonts turned into Arial with our custom font's kerning, or something. The bug also differed from HTTP to HTTPS, where on HTTP it would work just fine.

We started messing around with the fixes described in various blog posts and this thread but we had no luck. I was dumbfounded and was ready to replace the text with images.

I then tested with caching turned off in IE, and the problem went away. So we tried turning off cache at header level. Not pretty. But it worked. The no-cache header was only set on the fonts, and it worked like a charm.

edited Jun 20 '12 at 18:24

Jon Lin

142,182
29
220
220

answered Jun 20 '12 at 17:27

art0rz

111
6

The same issue here. No cache is the only option. – Max Ch Aug 08 '14 at 17:37
[This answer](http://stackoverflow.com/a/13424799/2590861) helped me for a similar issue. – Raphaël Oct 29 '14 at 14:18

OammieR · Answer 2 · 2012-05-04T07:27:46.310

1

This work for me. Put an id in <link>

<link id="main-css" rel="stylesheet" type="text/css" href="/css/styles.css" />

On document ready, use pure javascript or jQuery like this.

 //Script
    document.getElementById('main-css').href=document.getElementById('main-css').href;

 //or Jquery
    $('#main-css')[0].href=$('#main-css')[0].href;

edited May 04 '12 at 07:27

answered Jan 25 '12 at 10:17

OammieR

2,800
5
30
51

CSS Custom Font in IE changes on refresh

2 Answers2