Demo for Google Webfonts (different conditions)

Main points

http://www.google.com/webfonts
  1. Google webfonts simplifies the coding for including their webfonts in your page. Your link is just a request. You can see what they add if you use Firebug. What Google provides is a subset (sometimes more than one) of the glyphs available in a full version of the font-family. For example, Linux Libertine is available as a Google webfont If you don't like any of the 501 font-families It is possible to serve almost any font you want on your own server or link to a font archive other than Google as well. And there is a Webfont Loader package of Javascript available from Google that will do all this for you.
  2. A complete font-family is usually a bundle of four sets of glyphs for normal, italic, bold, and bold-italic. (Once in a very great while, Small-Caps also). But some designers, especially of fantasy or cursive fonts, don't design the whole gamut. Google webfonts range from just one face (e.g. Inconsolata) to as many as 10 (with extra weights besides the standard 400 and 700—see Josefin Slab, below.)
  3. Google shows you for each font which weights and sizes are available and asks you to tick which weights and styles you want, showing you how much each one adds to the download time for your webpage. You indicate with specifiers (e.g. 400, 700, 400italic, 700italic) which ones you want: <link href='http://fonts.googleapis.com/css?family=Linden+Hill:400,400italic' rel='stylesheet' type='text/css'/> (In this case, these are the only two available.)
  4. You then can assign the font-family to elements and spans, and can add the font-weight and font-style in the the css entry. You can alternatively use the <em> tag in the text, and likewise for <strong>. (Examples in demo following.) WARNING: Do not use the <i>; it will always browser generate a generic italic font with serifs, even if the base font is sans-serif. With a sans-serif base font (e.g., Droid Sans, Philosopher, Inconsolata, Ubuntu Mono, and Josefin), browsers will generate two 'italics' – a script one (with <i>) and an oblique one with <em>.
  5. MOST CONFUSING POINT: If the font you are using does not have a full set of "styles," or you don't request the ones you need for e.g. bold (700), then the browser will fake a bold by thickening all the lines in the regular default, or slanting them in the case of italic, with a result that is usually less pleasing to a typographer than the one a designer would have intended. Here are some examples of the difference, and we can demonstrate them by erasing the '700' in the font link line. (or 'italic').

This is Droid Sans and <em>italic and <i>italic</i>and 700 bold and browser-bold and <em>bolditalic [DS=400, 700; no italic; italic+bolditalic are browser generated, two ways in the case of italic.]

This is Inconsolata, a monospaced sans-serif: Grumpy wizards make toxic brew<em>italic and <i> italic and Bold no, only browser-bold [Incon=400 only]

This is Linden Hill:Grumpy wizards make toxic brew, find success incessantly and with 'em' tags: incessantly.For comparison, This is browser generated italic with 'i' tags and boldly and with boldly with 'b' tags [LH=400,400italic, no 700, so "bold" here is browser-bold]


This is a Philosopher, and a Philosopher Bolded and Philosopher strong a true Philosopher 700 a Philosopher italic, and Philosopher emphasized and Philosopher in 'i' tags. this is a Philosopher bolded italic and Philosopher italic emphasized and Philosopher 700 italic [Phil=400,400italic,700,700italic]

This is Ubuntu Mono gathering and Ubuntu Mono strong and Ubuntu Mono italic gathering and true bold italic and so is this. But this is browser-generated i[UM=400. 400italic, 700, 700italic]

This is Gentium Book Basic gathering, and strong-bold and b bold and true bold and this is italic gathering. certainly not faux! <i>With italic tag and the not faux bold thing.[GBB=400,400italic,700,700italic]

This is Sorts Mill Goudy gathering and mainly check of ligatures: find different floor. And try em-italic gathering and <i> i-italic[SM Goudy=400, 400italic]

ThisThis is LinuxLibertine for comparison. It is not a subsampled web-font. Find the first floor baffling and infuriating. flounders affinity, affluence; first and soſt (no ligature support in Chrome) Small-Caps, and designer Small Caps This is an actual font in the Linux Libertine font-family. There is none in Georgia.

This is Georgia for comparison.(20 pt) With fish and flounder. fish and flounder by decimal Unicode. Small-Caps and designer Small Caps

a little 300 weight Josefin slab and italic compared with: <i>italic versus <em> italic
or even 100 weight [JS=10 styles in all]

You can read about it here: