Search code examples
cssfontsgoogle-font-api

Google Font Yanone Kaffeesatz Light not displaying

I'm using the Google font family Yanone Kaffeesatz on my website. I have the following code in my header

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>

In my stylesheet I have:

h1{font-size:2.0em; font-family: 'Yanone Kaffeesatz Light', arial, serif; line-height:1.2; z-index:999; position:relative }
h2{font-size:1.5em; line-height:1.3em; font-family: 'Yanone Kaffeesatz', arial, serif; }

h2 displays just fine. h1 reverts to Arial. I cannot use Bold or Book either, only the normal version.

Solution

  • The font family name is always "Yanone Kaffeesatz". To get a different weight change the font-weight property. Example at jsFiddle:

    h1 {
    font-size:2.0em; 
    font-family: 'Yanone Kaffeesatz', arial, serif;
    font-weight: 200; 
}