Custom Web Fonts got Easier

Custom fonts for styling just got easier with Googles release of the new Font API

It has been a bit of a pain including custom fonts in styling do to file size, bandwidth, page load etc…
With Google releasing this new API Google Font Directory it will make things a whole lot easier for us developers and also for the users viewing the sites.

As we know including external files from huge redundant places like Google offers the best browser caching around.
The reason is that the more sites that include these files in their site, the better the chance is the the users visiting already have the file cached in their browsers.

So without further ado, here is how you can use the Google custom fonts.
There are 2 ways you can use this API, the first being more pointed towards using just one font,

You include the API style link in your html head section like this

Now any place a h3 tag is used the font will be Cardo.
Another option is to import it directly into your CSS file at the top

Now you can use the Cardo font anywhere in your CSS file you wish.

There is also a JavaScript version to include multiple fonts.
It looks like this,

The CSS uses a class so that if it is not activated via the JavaScript, it will not even be included to the element.
The CSS looks like this

Here is a complete working example

With these new font options developers like me get an even bigger playground!