SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Houston, TX
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Internet Explorer, and Fonts.

    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'.

    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>.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi 04SCOOB, welcome to the forums.

    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. #3
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Houston, TX
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I only checked in IE9, but it looked fine to me compared with Chrome.

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Houston, TX
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the dev tools try setting to a lower ie version.

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi 04SCOOB,
    I've some things to consider.

    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.

    =======
    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):
    Code:
    #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 netrenderer.com you can see it's working in IE6, IE7, IE8, IE9, IE10 and IE11.
    For the other browsers: no harm.

    =======
    Speed 'm up!
    With omitting all jQuery javascripts (thus far: not needed) and making this 230kB recent-warcraft.jpg of the 1.5MB recent-warcraft.png (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:

    • Test: test-aggro-commonfonts.htm
    • All browsers can easy render the Arial font (or Helvetica, for the Mac's).
    • For the beauty, here the logo is made as an image in the Roboto-font (this aggro-logo.png of only 23kB), the rest is normal text.

    The results are:
    Code:
    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)

  7. #7
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Houston, TX
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by 04SCOOB View Post
    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!
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •