The Google Font API; Free fonts for all
Google is out to make the web a free-for-all place. They started proceedings more than a decade ago with ‘Information’. This morning, out in the garden of Open source came ‘fonts’. Looking around, some developer contemplating, in the famed “20 per-cent” time, thought that the plain-jane-web needs beautification. Eureka! Eureka! Out comes Google Fonts API, with the Google Font Directory in tow.
Web designers, although acknowledging the lack of typography, have their creative hands bound because current technology for rendering type in the browser limits the designers to six fonts, provided you don’t resort to use of something like sIFR and Cufn, two projects that use Flash and JavaScript, to embed fonts on web pages from the server side. However, there’ long been a better way to embed fonts waiting in the wings: W3C’s @font-face rule for CSS.
But it has, since its inception, encountered two major road-blocks. First, most browsers didn’t support it. But with the latest versions of Safari, Firefox, Opera and Google Chrome all now supporting @font-face, that problem is close to being solved. It’ the second major problem that’ the sticking point: licensing restrictions forbid embedding fonts via CSS and the font foundries are reluctant to change this because putting their fonts on the web would expose them to piracy. Typekit was launched to be a middle-agent between the foundries and designers to provide the fonts through its servers. But then again, it wasn’t free.
Google, the Santa of this Summer arrived this morning, and announced, that it has collaborated with Typekit to provide free fonts (ironic?). The font can be inserted with a simple CSS link or using the Font API and the Web-Font loader. Google claims all browsers will support this, including Internet Explorer from v6 onwards!
Oh and yes! fonts will now also be hosted on Google servers, which sounds way more reliable than Typekit’s servers ever did. So forget downtime, use one of the 18 fonts (bound to increase!) in the Google Font Directory, and make the Web a beautiful place.
By the way, we have included a sample of Google fonts in this article. This text is fully selectable:
Hi, I’m Reenie Beanie
And can be styles with CSS:
Hi, I’m Reenie Beanie with a CSS shadow
You can do it too, here’s how:
Copy and paste the following HTML into a file:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.
<style>
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine
You can start using the Google Font API in just two steps:
- Add a stylesheet link to request the desired web font(s): <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.
com/css?family=Font Name“> - Style an element with the requested web font, either in a stylesheet: CSS selector {
- font-family: ‘Font Name’, serif;
- }
- or with an inline style on the element itself: <div style=”font-family: ‘Font Name’, serif;”>Your text</div>