Internet Explorer, and Fonts

HTML & CSS
1

Hey guys new to the forums and I just wanted to say hello! I have got a question, and I have not seemed to have found a true solution any where. Why is there such a huge difference in rendering, say fonts from Google web font API in Internet Explorer, and the other browsers. It’s really, really becoming a huge pain in the… having to make so many fixes for IE. If anyone has any tips or a fix to work around this issue please let me know. Or maybe I just either need to cut out something, be it the font API or IE all together, I’d love to choose option ‘b’. :rolleyes:

If you need a screenshot or link let me know.

Thanks.

P.S: Hopefully this was the right area to post this, as I figured it pertained to @font-face more then <link>. :x

2

Hi 04SCOOB, welcome to the forums. :slight_smile:

I found Google fonts buggy in other browsers, too, so I gave up on them a while ago. It might be particular fonts that are not well set up for IE. Feel free to post a link to an example page that we can test, and indicate what version(s) of IE the problem occurs in.

3

Link here.

This is just a personal project I am working on. It’s just for fun, and has a tremendous amount of work left. Chrome the layout looks great in my opinion. Ie is a whole other beast…

4

I only checked in IE9, but it looked fine to me compared with Chrome.

5

In the dev tools try setting to a lower ie version.

6

Hi 04SCOOB,
I’ve some things to consider. :wink:

Custom fonts?
Imported custom fonts are often not cross-browser. Or it depends on the browser version, or maybe the operation system or the graphical card…

With your “Roboto” font, on my Win-XP desktop IE7 (!) is better performing than Chrome 30 (one version before the latest):

But Chrome 31 is fine, while Opera 12 goes wrong:

Though the latest Opera 18 is fine.
And Safari 5.1.7 on desktop is wrong, while the same Safari 5.1.7 on my Win-7 laptop is fine!

Conclusion:
It’s mostly better to stay with the common standard fonts. That’s speeding up the page speed too: it is saving the extra download for the custom font and saving the extra time for rendering of the custom font. :slight_smile:

=======
Style enhancement
Apart from the font matter, I saw that IE7 has problems with the top-menu and the footer-menu:

To get them horizontal and without the list-dots, you can do this (the other styles for these elements can stay as they are):

#w-header .menu {
	list-style: none;
	margin-top: 0;
	top: 28px; /* change */
	}
#w-header .menu li {
	display: inline; /* instead of inline-block */
	margin: 0;
/*	width: 100px; remove */
	}
#w-header .menu li a {
	display: inline-block;
	border: 1px solid #F5F5F5;
	padding: 4px 9px; /* change */
	}

#w-footer .w-copyright ul {
	list-style: none; /* add */
	}
#w-footer .w-copyright ul li {
	display: inline;  /* instead of inline-block */
	margin: 0 10px;
/*	width: 100px; remove */
	}
#w-footer .w-copyright ul li a {
	display: inline-block;
	border: 1px solid #002C40;
	padding: 4px 9px; /* change */
	}

With [U]netrenderer.com[/U] you can see it’s working in IE6, IE7, IE8, IE9, IE10 and IE11. :slight_smile:
For the other browsers: no harm.

=======
Speed 'm up!
With omitting all jQuery javascripts (thus far: not needed) and making this 230kB [U]recent-warcraft.[B]jpg[/B][/U] of the 1.5MB [URL=“http://www.aggro-designs.com/css/layout/recent-warcraft.png”][U]recent-warcraft.[B]png[/B][/U] (as I did in the test page), you can win also a lot of page speed.
If you go over to normal fonts as well, you’ll get this:

The results are:

Original .........................: 1.7 MB transferred, 6.86s (20 http/requests)
Test page with the Roboto-font ...: 345 kB transferred, 1.30s (14 http-requests)
Test page with common fonts ......: 301 kB transferred, 1.01s (11 http-requests)

:slight_smile:

7

Man that is perfect! That is exactly the kind of stuff I was trying to figure out and then some. Side note, yes a lot of those photos and stuff was me testing mainly the paths in the framework. None of the images are really optimized, and I have a lot of things to kink out between the different browsers. This was definitely more then enough info I appreciate it a ton. This is really all for the learning of my self, and I will really learn some things from this. Bad news is I am really bummed that the Google Font API really has that many issues between all the different versions, it really makes web design and development a lot more complicated then it should be. What can you do though right? Thanks a ton for that information!

8

There are other options out there that work better. I find the FontSquirrel fonts work well cross browser, and their code is a little more comprehensive. And then there are lots of paid options, too, like TypeKit and FondDeck, which are pretty good.