klenwell information services : CssGoogleFonts

Wiki source for CssGoogleFonts


Show raw source

=====Google Fonts API=====
Return to DevCss>>====More Information====
[[http://code.google.com/p/googlefontdirectory/ | Google Code Page]]
[[http://code.google.com/p/googlefontdirectory/source/browse/#hg/ | Font Source Files]]
[[http://code.google.com/apis/webfonts/docs/getting_started.html | Google API Page]]
[[http://code.google.com/webfonts | Google Sample Page]]
[[http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html | Google Announcement]]
[[http://news.ycombinator.com/item?id=1361660 | Hacker News Thread]]
>>

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 [[http://code.google.com/apis/webfonts/faq.html#Many_Fonts_Per_Page | this Google recommendation]].) For more information, try the links at the right.

====Usage====
Web Page Head Section:
%%(html)
<!-- 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
%%(html)
<span style="font-family:Cantarell, sans-serif;">Cantarell, sans-serif</span>
%%

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

----
CategoryDevelopment