Google fonts with IE8 on Executive Theme

Community Forums Forums Design Tips and Tricks Google fonts with IE8 on Executive Theme

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  alozzy 10 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #71800

    alozzy
    Participant
    Post count: 13

    Font rendering on IE8 looks terrible with the Executive theme I’m using on http://www.vcit.ca.

    I used the IE 8 developer tools to pinpoint the problem and discovered that the following CSS declaration for the body’s font-family was the cause:

    “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif

    I found that if I removed the “Open Sans” value, then text is rendered a whole lot more clearly.

    I’m pretty sure the root cause is with the way Google Web Fonts are linked in the Executive theme. Specifically, the child theme functions.php has these lines:

    //* Enqueue Google fonts
    add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
    function executive_google_fonts() {
    
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=<strong>Open+Sans:400italic,700italic,400,700'</strong>, array(), CHILD_THEME_VERSION );
    
    }

    I think the problem is that IE8 and older do not recognize multiple styles and weights for a single font-family name (i.e. 400italic, 700italic, 400, and 700).

    I believe this would work if it was placed in the header:

    <!--[if IE]>
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
    <![endif]-->

    However, I’m not sure how to create a conditional statement in the functions.php for the child theme to do the same thing…

    http://www.vcit.ca
    #71803

    alozzy
    Participant
    Post count: 13

    What if I edit the child theme’s function.php to omit the individual styles declaration (i.e. 400italic,700italic,400,700) as follows:

    //* Enqueue Google fonts
    add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
    function executive_google_fonts() {
    
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans', array(), CHILD_THEME_VERSION );
    
    }

    Will that result in all styles of the Open Sans font being enqueued, or only the “Normal 400″ stlye?

    I’m looking for the most effective yet simple method of using Google Web Fonts (as intended by Studiopress) while ensuring that IE 8 will render the font OK.

    #71805

    alozzy
    Participant
    Post count: 13

    I tried inserting the following code:

    <!--[if IE]>
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
    <![endif]-->

    By adding it to the Genesis theme settings “Header and Footer Scripts” section under the heading “Enter scripts or code you would like output to wp_head()”. After doing so, I found these code lines in the source page but there was no improvement in the look of the font in IE8.

    Running out of ideas…

    • This reply was modified 10 months, 3 weeks ago by  alozzy.
    • This reply was modified 10 months, 3 weeks ago by  alozzy.
    #72619

    emasai
    Participant
    Post count: 669

    Have you tried a conditional IE8 stylesheet?


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #72637

    alozzy
    Participant
    Post count: 13

    I think you are suggesting something like this:

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="ie.css" /> 
    <![endif]-->

    Which I would place in the header by using the Genesis “Header and Footer Scripts” setting section. Next, I would need to create a separate style sheet (named ie.css) for IE 8 and below.

    Is there any automated way of examining an existing style sheet to figure out what CSS hacks are needed for a given browser (for example, IE 8)? The Executive child theme has a large style sheet and it would be a pretty daunting task to manually figure out what hacks are needed for IE 8 and below…

    In my case, the real problem seems to be that Open Sans GWF just looks like crap on IE 8 and older, but I’m not sure why…

    Perhaps I should try using a different GWF, that might be the simplest fix. The Open Sans looks great on other browsers though.

    #72644

    alozzy
    Participant
    Post count: 13

    This article is interesting:

    http://www.kristengrote.com/blog/articles/google-web-fonts-playing-nicely-in-every-browser

    Perhaps the real problem is that the Executive child theme uses multiple font weights of the Open Sans typeface, which IE 8 doesn’t understand. So, IE8 renders all Open Sans styled elements with the “standard” font weight and it’s that weight that looks bad??? Confused…

    According to that article, I could use the conditional classes technique to create a separate class for IE 8 or older and then, in the child theme’s style.css file, create “oldie” versions of the fonts/weights declarations where needed.

    I think a separate style sheet might be less messy though…

    I wish I understood exactly why the Open Sans GWF looks so bad in IE 8 and older. I’m really not sure if it has anything to do with the font weights per se. IE 8 does appear to be using the “standard” Open Sans font weight, based on what IE’s developer tools shows me.

    #72651

    alozzy
    Participant
    Post count: 13

    For now, I’ve switched from using “Open Sans” to Roboto as the latter looks much better in IE 8. There were only three places in the style.css file to change the font-family declaration and only one place in the function.php where the GWF is referenced.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.