Google Fonts API
Google announced a couple of days ago the released of a new service called Google Font API. If you have designed a Website and tried to incorporate custom fonts into your design you know how tricky that can be.
It’s true that after the emerging of @Fontface things started to get a lot easier for the designer, but even Fontface brings some bugs to the equation (specially in Old browsers). There are payed alternatives that work better than @Fontface but that’s a major downside to that, they are payed.
And then Google enters the scene with their own solution, the Google Fonts API and the Google Fonts Directory, introducing an easy way to include custom fonts into any website design in a quick and easy way. The good news is that it’s coded in a way that will make it work even in ancient browsers like Internet Explorer 6 (why on earth is anyone even using this?).
The available font types available isn’t something to write home about, but the catalog will surely grow in the upcoming months / years.
The usage is very simple and it’s very well documented on Google’s font API website. All you need to do is add a stylesheet link to request the desired web font, after you just need to style an element with the requested web font like you would with any other websafe font.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</link></head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Google reminds you:
When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
Something you should always do anytime you insert a custom Font in your design no matter the method.
