Properly defining font-family in @font-face CSS rules

Question

I recently came across the @font-family CSS rule as I was looking to use web fonts on my website.

Coming to the point, I've seen two variants in @font-family CSS code, which you can see below:

@font-face {
  font-family: 'Droid Serif'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Regular-webfont.eot');
  src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifRegular'),
   url('DroidSerif-Regular-webfont.woff') format('woff'),
   url('DroidSerif-Regular-webfont.ttf') format('truetype'),
   url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
}

@font-face {
  font-family: 'Droid Serif'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: italic; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

and this is another:

@font-face {
  font-family: 'DroidSerifRegular'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

@font-face {
  font-family: 'DroidSerifItalic'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

Compare the lines that I've commented with /* NOTE THIS LINE */

The first variant is by Google Web Fonts, while the second one is by Font Squirrel. So, is one of these two wrong? (Just wanted to confirm, although both are very reliable sources.)

If acceptable, which one of the two would I be better off with?

Answer 1

the first example, though hard to believe, is correct; notice how the Droid Serif Regular is being declared as font weight normal and font style normal...how you'd expect a regular font to be displayed. the second declaration, it's calling in Droid Serif Italic, and setting it to to font-style:italic; this allows you to use multiple fonts within a family. If you wanted to add a bold font, you'd apply the same @font-face rule except you'd change font-weight:bold, while leaving font-style:normal and declaring the same font family.

fontsquirrel really does a great job with rendering @font-face rules, actually i've read about this technique there. surprised it's not being implemented. you can read more about this here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/