Today the largest Google developer conference the Google I/O is starting. In fact it started half an hour ago. And as always Google comes with lots of new things to these conferences. Last year they unveiled among other things Google Wave, which by the way is opening up to the public today. After reading the announcements for today i noticed something very interesting: Google Font API & Google Font Directory.
The Google Font Directory offers a selection of high quality open-source web fonts that can be used through the Google Font API by developers to make their websites more beautiful. The slogan of the announcement is “Making the web beautiful”. As they say the Google Font API hides a lot of complexity behind the scenes. The fonts are converted by Google’s huge server infrastructure into a format compatible with all major browsers (including Internet Explorer 6!). The servers send back just the styles and weights the user selected. The fonts can work with CSS3 and HTML 5 styling so you can drop shadows, rotate them. Also these fonts can be used in your CSS just as they were local fonst.
I made a quick test and as you can see on the title of my blog up in the header, they work just fine. They are perfect in Chrome and Internet Explorer but in Firefox they look a little bit messy.
To achieve this effect in the title “Lacisoft’s” i used the following CSS code:
first i included the CSS library:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
after that i modified the styles for the class title used on the title of the blog:
.title {
font-family: 'Lobster', serif;
text-shadow: 4px 4px 4px #aaa;
font-size: 38px;
font-weight: normal;
}
And you can see the results in the header as i said.
Now i will do the same here in this post including a text in a special class and styling it with CSS to be rendered with a web font.
I used this css here:
.fontdemo{
font-family: 'Lobster', serif;
text-shadow: 3px 3px 3px #aaa;
font-size: 42px;
font-weight: normal;
}
I think this is a great feature that will be used by many developers. In time when the font directory will get bigger maybe i will find a font that i really like. Google continues to innovate and to demonstrate that it really wants to make the web a better place. At least some of it anyway.
Laszlo Bodor
