Question

I’m using a CSS file from the Google API:

<link href="http://fonts.googleapis.com/css?family=Ruthie" 
      rel="stylesheet" type="text/css" />

It looks like this:

@font-face {
  font-family: 'Ruthie';
  font-style: normal;
  font-weight: 400;
  src: local('Ruthie'), local('Ruthie-Regular'),
  url('http://themes.googleusercontent.com/static/fonts/ruthie/v3/Di1LdjRzoaEvDmrQy1l_ww.woff') format('woff');
}

However the W3C CSS validator returns 4 errors:

1) Value Error : font-family Property font-family doesn't exist 
   in CSS level 2.1 but exists in [css1, css2, css3] : 'Ruthie'

2) ...

You can check all errors by validating the page http://fonts.googleapis.com/css?family=Ruthie

So my questions are:

1) How can I validate using a different CSS version like 2? Is this a good approach?

2) How can I fix these errors, eventually using a similar font and removing this API?

3) Also I would like to understand exactly why this CSS is not valid…

Answer 1

You can validate CSS level 3, the code provided by Google is valid CSS3. This isn’t valid CSS 2.1 code since there’s no @font-face in the CSS2.1 specification. @font-face is defined in CSS Fonts Module Level 3: 4.1 The @font-face rule.

The @font-face rule was already defined in CSS2, but obviously didn’t make it into CSS2.1. So there’s no way to validate the stylesheet in CSS2.1, only in CSS3 or CSS2.