Google Fonts Won't Work

Question

I'm having a rather strange issue. I'm trying to include a font from Google Fonts, "Yanone Kaffeesatz", in the head of my HTML and then use it to style my h1 and h2 elements using the font-family property. But even though I followed Google's instructions my browser still displays the standard sans-serif font. Where have I gone wrong?

Screenshot: https://docs.google.com/drawings/d/1NCq3ch0ClzaWfniSDKQJa9C-fX9zXH8-R-I7GnjqqbI/edit?usp=sharing

Code:

<!DOCTYPE html> 
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
</head>



 h1, h2 {
    color: black;
    font-family: 'Yanone Kaffeesatz', sans-serif;
  }

Eric Katz Eric Katz · Accepted Answer · 2015-07-17T20:18:39

You'll probably want to reference the https:// protocol instead of the http://. It is likely getting blocked by the browser for trying to load insecure content over the secure page loaded in your browser url.

To test for this, you can also try to refresh your site without https:// and see if it display the fonts correctly.

Since your screenshot is from within c9.io's preview URL and you're eventual production site may not be using SSL. You may want to change your link href by omitting the http: part of your protocol all together and just use
//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700 which will automatically try to pull the resource from whatever protocol the site is currently using.

Google Fonts Won't Work

1 Answers