[symlink]

I am new to Google Fonts. I have gotten this URL from Google:

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

My question is, how to use the various fonts I have selected. They are, as you can see, Ubuntu Normal 400, Ubuntu Normal 400 Italic, Ubuntu Bold 700, and Ubuntu 700 italic.

I have tried everything but can only use plain “Ubuntu” and nothing else.

Please help!

[hamed-al-khabaz]

Here is me using italic version of this: http://jsfiddle.net/6wzuy/

font-family:ubuntu;
font-style:italic;
font-weight: 700; 

The technique is to use CSS font-style Property

[jason]

font-family: 'Ubuntu', Arial, serif; font-weight: 700; 

EDIT: You have to include separate font libraries of italics and bolds in order for them to work as intended.

If you don’t include the italic and bold versions, the browser will try to compensate, but will more than likely do a very poor job. More about this in this List Apart article.

If you want to add font styles to your fonts, always add the extra font styles to and specify it in your document. Especially in large serif font it can make a huge difference.

[jukka-k.-korpela]

The Google code you use declares regular, italic, bold, and bold italic typeface (specific font) as members of the font (font family) “Ubuntu”. This implies that you use italic and bolding just as you do when using normal fonts.

You can use font-style: italic to request for italic typeface and font-weight: bold (or, equivalently, font-weight: 700) to request bolding. Note that many HTML elements imply italic or bold by default; for example, h1, strong, and th elements imply font-weight: bold.

There are other ways of using @font-face so that each typeface is declared as a font family of its own; FotSquirrel does that. But the approach applied by Google is more logical and compatible with the way fonts are generally used in HTML and in CSS.

[Author]

Posts