@font-face gets a push from google! 21.05.10

Category: Coding

@fontface, added in CSS 2, removed in CSS2.1 and resurrected in CSS3..finally.


Google has announced today (21/05/10), that they are providing an open-source
library of 18 typefaces for Web designers as part of its Google font directory.

Google Font Directory

I want to repeat one part of that..."open source"

The fonts in the directory have been released under open source licenses; which mean commercial and non-commercial use, big smiles for some.

Google provides hosting for these fonts and a very easy way to plug them in to your site..

The @font-face declaration is part of the CSS3 spec and has great browser compatibility.

As normal you can still stack fonts, which is a plus for graceful degradation.

To use Simply add an @font-face declaration as follows:


@font-face {
      font-family: "The Non System Font";
      src: url(non_system_font.otf) format("opentype");

Then include the font-family as normal.

body { font-family: "The Non System Font", sans-serif; }



Font Dragr

Font Dragr is a web application for testing your custom fonts, you simply drag and drop which ones you want to view and font dragr does the rest. You do not need to be online to use this web application after the initial load.


Webfonts.info has a lot of info on @font-face, I highly recommend a look.


**Update 9th June 2010**

Further Reading:  Web Fonts at the Crossing by RICHARD FINK, A List Apart.


Posted by: Sam S