Search code examples
htmlcssfontswebfontsgoogle-webfonts

Included google webfont not working

I'm trying to use a google font like so:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> -->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <style>
        body {
            font-size: 2em;
            font-family: 'Source Sans Pro', serif;
            font-style: normal;
            font-weight: 300;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>
</html>

as you can see I've tried with http and https as suggested in this stackoverflow answer but nothing seems to work.

Am I doing something obviously wrong?

Also as you can see the font takes the fallback serif font. Now why is the line-height changing when removing the font which is not even used?

enter image description here

I'm using Google Chrome Version: 52.0.2743.116

And the real question is: How to include the google font?

As it seems to be loaded from dev tools enter image description here

Solution

  • Try opening the site in incognito mode, maybe some browser plugins meddle with your code. I've created a jsbin based on your code and it works perfectly fine, I also saved it on my hard drive and it also works. Checked on the exact same version of Chrome as yours.

    Edit: Problem solved. After some investigation and trial and error, it turned out in that in order for this to work for Caramba, he had to modify the font-family from the body styles to include three comma-separated values for this to work, so 

    font-family: 'Source Sans Pro', serif;

    did not work, while

    font-family: 'Source Sans Pro', Helvetica, serif;

    did.