Fonts do not load correctly on IE8

Asked

Viewed 57 times

3

I’m using both sources on a website:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

Open correctly in all browsers, but not in IE8. Is there a fix for this? Or I’ll have to download the fonts and use @font-face?

css

1 answer

5


Try putting each font style in a separate link:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<!-- ... -->
<link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>

To avoid so many links in browsers that do not have this problem, use conditional comments:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
<!--[if (!IE)|(gt IE 8)]>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>    
<![endif]-->
<!--[if lte IE 8]>
    <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <!-- ... -->
    <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
<![endif]-->
  • 1

    It worked, IE8 did not render very well the source, but it’s already worth! : D

  • 1

    I updated the answer because I had forgotten to consider the other browsers, !IE.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.