Hey All,

I am using a font for my clients website that is specific to them. I use the below code to load it up in the various formats needed to get it to run over most platforms. But for some strange reason, when I test it in IE 8, as it loads up it jumps back and forth between the correct font and another sans-serif font, before settling on the sans-serif font. This is the code in my CSS:

CSS:

@font-face {
    font-family: 'eddmondregular';
    src: url('../eddmond-webfont.eot');
    src: url('../eddmond-webfont.eot?#iefix') format('embedded-opentype'),
         url('../eddmond-webfont.woff') format('woff'),
         url('../eddmond-webfont.ttf') format('truetype'),
         url('../eddmond-webfont.svg#eddmondregular') format('svg');
    font-weight: normal;
    font-style: normal;


}


.title {
    color: white;
    font-family: eddmondregular, Verdana, Geneva, sans-serif;
    font-size:14px;
    position:relative;
    border-bottom: solid 2px #FFF; 
    padding:10px 0px 0px 0px;
    margin:0px 0px 0px 5px;
        float: left;
    }
 

 

HTML

 

 <div class="header-container">
            <header class="wrapper clearfix">
                <div class="logo">
                <a href="index.asp">
                  <img alt="Click here to return to Mason UK homepage" 
                        title="Click here to return to Mason UK homepage"
                        border="0" src="images/mason-uk-logo.png" /></a>
                    <h1 class="title">MASON UK LTD</h1>
                      <h5 class="subtitle">Vibration Control Products<br>
                                            & Acoustic Floor Systems</h5>
                </div>

 

 

I've looked in the CSS to find conflicts, but the only ones I can see are in the body and HTML tags, which should be overwritten by the class='title' shouldn't it?

http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav.html

Thanks

Rich

Hi Rich,

 

Try putting your web font in quotes.

 

 

 

font-family: 'eddmondregular', Verdana, Geneva, sans-serif;
 

Thanks J.P, but it doesn't seem to have done anything....

You can normally check if something is conflicting by adding !important. I wouldn't recommend this as a solution but just a test for the time being.

 

 

 

font-family: 'eddmondregular', Verdana, Geneva, sans-serif !important;
 

Thanks JP, tried that but the problem continues. Does this suggest anything?

You appear to have two classes in your stylesheet for 'title'.

 

Also I don't see anything wrong in IE7 or 8, the font is displaying at it should, however it is slow to load. Perhaps you need to clear your cache and try it again, but it is appearing for me.

 

Also, have a look at this. It raises a few points that seem (sort of) related to your problem.

Hi J.P, Thanks again for your feedback. With me the correct font flashes up briefly and then changes to a san serif font (looks a bit helvetica'ish to me).

Took out those extra title tags and another one I spotted that is IE7 specific, but that made no difference.

Read that article but couldn't find much use there, as it does load the font and then somehow loses it!

 

ARRRGH!

 

But you say it comes up ok on yours in IE 7 and 8? Any chance of a screen grab?

 

Thanks again!

Just looking at some issues on Stackoverflow similar to yours, you may find them useful. I think they all mention the Facebook like button being the culprit:

 

http://stackoverflow.com/questions/4674941/font-face-loading-okay-in-ie8-but-then-flipping-to-fallback-font-also-bold

http://stackoverflow.com/questions/5823747/fbml-like-button-eot-font-rendering-in-internext-explorer

http://stackoverflow.com/questions/5184029/ie8-fbml-like-button-and-eot-font-embedding

 

This may or may not be related to your issue, so apologies in advance if it's not

 

Edit: I'm too seeing the font flicker in IE8, the correct font is loading after a few seconds.

 

Lyndsey.

Thanks Lyndsey, Read those articles and tried commenting out the Facebook and other share buttons, but to no avail!

 

Cleared cache and everything.

 

**** you IE!!! **** YOU!!!!!!!!!!!!!!!!!! :E :E

Hi Rich,

 

I can't take a screenshot because I don't have access to IE at the moment.

 

I will however look at your source code again to see if there is anything that could be causing it. I find having a fresh look at code helps me identify issues quicker.

Thanks JP, thats kind of you.

The latest version of my websites template is here:

 

http://www.mason-uk.co.uk/responsive/html5boilerplate5-newnav4.html

It's just taking a bit of time to load but it seems to work as expected.

 

Heres a screenshot of what I see on both browsers http://cl.ly/NZSs.

Thanks mate, have you adjusted the code at all? Or are these screen shots of my current code?

Current code, I was using the developer tools in IE10 which emulates older browsers, they may be slightly inaccurate so id also try something like http://www.browserstack.com/.

I checked out that link you have, and the way it renders there is how it renders on the version of IE 8 I have installed on my computer (wrong font).

 

The example it renders of IE 7 shows the header text as a load of squares... not good... does anyone have IE 7 installed on their computer? Any chance you can check whether thats happening on yours? Thanks

 

So I still have to get around this.

 

How far back do you make your websites compatible?

IE7+ for me but that's very dependent on the project, target market and current browser stats (if they exist).

 

It's interesting that the IE10 emulations were incorrect, im gonna be much more wary of using these now.

Still having probs with this one. Does anyone have any idea why the font initially loads correctly in IE then jumps back to the backup font?

www.mason-uk.co.uk

 

Thanks

Is IE dispaying your page in quiks mode perhaps? IE8 does that if you have a wrong doctype declaration or any other serious markup errors.

I just had a look at it in IE7 and i'm getting the little squares. I'm not getting the font load at all, not even for a split second as you described. One think i noticed, which may be totally irrelevant in this case, but i have had problems before with fonts not displaying correctly if they didn't like the font-weight which was being used. I can see in your case that IE7 is applying a font-weight of 700, whereas it doesn't appear to have a font-weight in other browsers. Maybe totally unconnected in this case, but always worth a look.

Thanks Guys, how do I find out if its using Quiks mode? Or serious mark up errors?

 

Bit worrying about IE7 not showing any font at all... What would you suggest regarding setting the font-weights?

 

I'm using some boilerplates that seem to have bits of CSS all over the place effecting things in my design and its a bit annoying....

To answer 1 of those questions, for IE7, it is Not in Quirks mode. Typing this in the address bar

javascript:alert(document dot compatMode)

 

Returns

 

CSS1 Compat

 

Regarding font-weight, i'm not sure that is the issue in this case, as it is working in 8 & 9, but not 7 or 10

Ok so i have been playing around with this all day and the only thing i can find is that IE7, for some reason doesn't like ?#iefix

Take it away and although it does not load your correct font, it does load Verdana. Tested in IE7 IE8 IE9 IE10 and the effect is the same, unfortunately taking that iefix away prevents the correct font from being used but enables IE7 to fall back to Verdana.

 

Best option, i feel would be to create a seperate css for IE7 without @font-face and allow other version to use it as is !

Ive just had a thought, perhaps it could be that your loading .title a few times, mainly in your desktop media query. I would take any font-family stuff out of your media queries anyway, since the font doesn't need to change at any break point. It shouldn't make a difference because of the IE support, but it's worth ruling out, it's also a cleaner way of styling.

 

.title {
color: white;
font-family: 'eddmondregular', Verdana, Geneva, sans-serif;
position: relative;
border-bottom: solid 2px #FFF;
padding: 10px 0px 0px 0px;
margin: 0px 0px 0px 5px;
float: left;
}

 

@media only screen and (min-width: 768px) {
.title {
font-size: 18px;
padding: 15px 0 0 0;
margin: 0;
} }
 

 

This is a much more efficient way of laying out your media queries. Personally on most sites I have a styles.css and a layout.css to help separate the two.

 

- You also have two slightly different CSS resets going on, one in the normalize.min.css and one in the navstyle.css.

- Your loading jQuery twice from two different CDN's, not great for performance.

 

Try using the 'inspect element' tools in Chrome to browse for anything that isn't being used. For example...

.logo {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 350px;
height: 85px;
display: block;
float: left;
position: relative;
}

Could also be written as...

.logo {
margin: 0;
padding: 0;
width: 350px;
height: 85px;
float: left;
}

 

And again, be wary that your loading things in your desktop media query only that aren't being inherited on the mobile one.

 

Whilst this may not solve the issue, a code clean-up is the best way to start tackling bug fixing, you need to make it easier on yourself to rule out any possible issues. Right now it's 3:30 and I need sleep, good luck!