caramba caramba - 3 months ago 8
CSS Question

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

Answer

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.