The Google Web Fonts Api

29.Oct.2011  |  Posted by admin  |  Filed under Other Projects

After developing SSG (StyleSheet Generator) especially the part of Fonts integration, i was looking in the internet for some free or open source fonts, which i can use directly in SSG. But i noticed that all fonts are zipped and must first be downloaded. Suddenly i saw an article posted by Google offering an intelligent way to get over 280 Fonts from diverse font designer who offer their work as open source. With the Google Font Api we dont even need to download the font, we can use the link they prevent after making a collection of different fonts, such as this example:

<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>

With this link i can use the font "Pinyon Script". The plus sign ( + ) is used istead of space. So if we want to chang the font-family of any tag in our CSS we need to call it by name, as follows:

p { font-family:Pinyon Script; }

This example shows how Pinyon Script looks like in a paragraph!

Another way to integrate our font collection is to use the At-Rule in our CSS file or directly in our post like i did in this post:

@import url("http://fonts.googleapis.com/css?family=Pinyon+Script|Marck+Script|Nothing+You+Could+Do|Gloria+Hallelujah|The+Girl+Next+Door|Atomic+Age");

Don't forget to set it between the style tag like this <style> @import ....... </style> if you want to integrate in your post.

In this example i'm using 5 different fonts in my collection

All fonts which offered by Google Font Api look great!

After all you got to watch the size of the font

cause some fonts might run heavy on the own site

which means that the site needs more time to finish loading

I believe this is an important part of the internet that designer were waiting for, So go an grab it ...

0 Comments

Write a Comment