[css] Specifying Style and Weight for Google Fonts

I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS

I tried all of the following as attributes for font-family but no dice:

  • 'Open Sans Bold'
  • 'Open Sans 700'
  • 'Open Sans Bold 700'
  • 'Open Sans:Bold'

The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?

This question is related to css fonts

The answer is


font-family:'Open Sans' , sans-serif;

For light: font-weight : 100; Or font-weight : lighter;

For normal: font-weight : 500; Or font-weight : normal;

For bold: font-weight : 700; Or font-weight : bold;

For more bolder: font-weight : 900; Or font-weight : bolder;


you can use the weight value specified in the Google Fonts.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}

Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Extra-Bold      800
Black           900

Note that very few fonts come in all 9 weights.