klenwell information services : CssGoogleFonts

Google Fonts API

Return to DevCss

Google has released a clever new Font API. It looks like you need Chrome to actually display the results, but I'm sure Firefox will catch up soon enough.

Find below sample implementation of the current font set (that ignores this Google recommendation.) For more information, try the links at the right.

Usage

Web Page Head Section:
<!-- in head section (all current fonts sans some variants) -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell|Cardo|Crimson+Text|Droid+Sans|Droid+Sans+Mono|Droid+Serif|Inconsolata|Lobster|Molengo|Nobile|Reenie+Beanie|Tangerine|Vollkorn|Josefin+Sans+Std+Light|OFL+Sorts+Mill+Goudy+TT|Old+Standard+TT|IM+Fell+DW+Pica|IM+Fell+English|Yanone+Kaffeesatz" />

<!-- Droid fonts -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif" />

Inline Usage
<span style="font-family:Cantarell, sans-serif;">Cantarell, sans-serif</span>


Samples

font-family:Cantarell, sans-serif; font-family:Cardo, sans-serif; font-family:'Crimson Text', serif; font-family:'Droid Sans', sans-serif; font-family:'Droid Sans Mono', mono; font-family:'Droid Serif', serif; font-family:'IM Fell DW Pica', serif; font-family:'IM Fell English', serif; font-family:Inconsolata, mono; font-family:'Josefin Sans Std Light', sans-serif; font-family:Lobster, cursive; font-family:Molengo, serif; font-family:Nobile, sans-serif; font-family:'OFL Sorts Mill Goudy TT', serif; font-family:'Old Standard TT', serif; font-family:'Reenie Beanie', fantasy; font-family:Tangerine, cursive; font-family:Vollkorn, serif; font-family:'Yanone Kaffeesatz', sans-serif;



CategoryDevelopment