Specifying Style and Weight for Google Fonts

Question

I use Google fonts on several of my pages and click on the wall trying to use font variations. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

I import three faces: Normal, Bold, ExtraBold through the link tag. The normal face is displayed correctly, but I can’t figure out how to use the font options in my CSS

I tried all of the following attributes for the font family, but not dice:

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

Google docs themselves do not offer much help. Does anyone have an idea how I should write my CSS rules to display these options?

Answer 1

They use plain CSS.

Just use regular font families as follows:

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

Now you decide how much weight the font should have by adding

for bold

 font-weight:600; 

bold (700)

 font-weight:bold; 

for extra oily (800)

 font-weight:800; 

Likewise, this is fallback proof, so if the google font should fail, your backup Arial / Helvetica (Sans-serif) font uses the same weight as the google font.

Pretty smart :-)

Please note that various font fonts must be specially imported via the link tag URL (the google font URL family request parameter) in the header.

For example, the following link will contain both a weight of 400 and 700:

 <link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'> 

Answer 2

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 the bold: font-weight : 700; Or font-weight : bold;

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

Answer 3

you can use the weight value specified in Google fonts.

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

Answer 4

Here's the problem: you cannot specify the weight of a font that does not exist in the Google font set. Click on the SEE SPECIMEN link under the font, then scroll down to the STYLES section. There you will see each of the “styles” available for this particular font. Unfortunately, Google does not list CSS font weights for each style. Here's how names are mapped to weighted CSS font numbers:

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

Please note that very few fonts are included in all 9 weights.