Search code examples
cssfontsconditional-statementsgoogle-font-api

google font only ie9 and the rest?

I am using Google Fonts to load two fonts. Since they look absolutely horrible in anything below ie9 I want to disregard them. Here is what I am thinking :

<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if !IE]><!--><html lang="en-US"><!--<![endif]-->

then in my css I could use something like this :

h1{
font: normal 33px/50px 'Open Sans', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;

}

.ie8 h1{
font: normal 33px/50px 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;

}

That takes care of it trying to use Open Sans. What about loading the actual stylesheet. Would something like this be fine?

<!--[if !(lte IE 8) ]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->

This would prevent ie8 and under from even loading the css and prevent wasted download - correct? Is this the correct syntax?

Anyone recommend a better way? I have tried loading all the fonts separate and they still do not work right in ie8 and 7 so that is not an option.

Solution

  • You'd have to use something like this to exclude IE8 and lower:

    <!--[if gt IE 8]>
    <link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if !IE]> -->
    <link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!-- <![endif]-->

    The first one only loads the font for IE9 and above. The second one loads it for all non-IE browsers.

    Alternatively, you could load the fonts with JavaScript.