Typography is the most valuable asset of your blog. It doesn’t matter if you have a colorful design blog, an awesome web magazine or a plain simple blog. The main focus always stays on the content and the readability of your text. And that’s where the importance of good typography comes. Well, in this article, I’m not going to give you tips upon good typography (as we already have some good tips on that thing) but, I’m going to explain and implement a rather new and innovative concept from Google that aims at providing a helping hand to all web designers and web masters out there.
The thing which I’m going to tell you about is, Google’s new fonts API. For those of you, who don’t know what an API is, have a look. After you are done with the concept of API (it isn’t that hard to grasp). The new font API is all about CSS magic. And that too, without overloading your web server. Let’s see how its presently done and how Google API attempts to change it.
Right now, when you use a particular font type on your web page, the font has to be downloaded upon every page request that goes on your server. If the user hasn’t visited the page before and doesn’t have any cached typefaces, the browser would automatically do the stuff in background. But, this takes a little time. And when the audience is huge, even a micro second can make huge differences. Here’s how, Google’s Font API come to the rescue.
If you use Google’s Open Font’s API, you have many advantages like:
Apart from that, the fun element of doing something different is always there. Anyways, I’ll show you an example on how the Google Font API can be implemented on your blog.
First, I’ll be providing you with a basic wireframe that would act as our base layout for further experimenting and adding the font typefaces (here’s a live demo of what you’ll get).
Start with a plain text file in your favorite text editor and copy the following code into it:
<html> <head> <title> Google API Demo</title> <link rel="stylesheet" media="screen" href="style.css" /> </head> <body> <div id="container"> <div id="content"> <h1>This is an example implementation of Google Fonts API</h1> </div> </div> </div> </body> </html>
The basic layout CSS:
* {
margin: 0;
padding: 0;
}
body {
background: #a3eed3;
}
The Content CSS:
#content {
width: 1000px;
margin: auto;
margin-bottom: 10px;
}
#content h1 {
text-align: center;
font-size: 4em;
color: #111;
text-shadow: 0px 2px 3px #555;
}
Alright. Now we have created a basic wireframe upon which , we’ll be implementing the Google Fonts API standards. To play around, just head on to Google’s Font API page and go to Google Font Directory.
You’ll see a list of fonts with the number of variants in superscript. Click on any one you like. For instance, I’ve chosen the Lobster font family for this example
After that, click the Get the Code button on the top navigation bar and you’ll get two codes:
Now, place the first code in the header section of the wireframe prototype we just created (along with the code to link your local CSS) and use the other code from Google’s font API to add to the heading section of your CSS.
In our example, we have used the following code:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Now, the heading section should look like this:
#content h1 {
text-align: center;
font-size: 8em;
color: #111;
text-shadow: 0px 2px 3px #555;
font-family: 'Lobster', arial, serif;
}
Save and reload your page and voila! You should now see something like this:
See, you’ve imported a font typeface with just few lines of codes and all load is on Google! The possibilities are endless as long as you go with your creativity. The Google Font API is still in beta stage and lots of improvements and font face additions need to be done in near future. If you have any difficulty in doing anything, do drop in a comment below.
15 examples of big fonts used in web design
How to add Floating share box to your website
Advertisement programs for blogs and other websites to make money online
Free wordpress gallery themes for web savvy
20 Best CSS based web design in early 2009
Author: Rishabh Agarwal1 articles posted by Rishabh Agarwal.
Visit author's website.
RSS feed for comments on this post. TrackBack URL
Saw tutorial for google font api in lot of websites but this one pretty easy and simple. Thanks Rishabh
Robert, Glad you found it interesting and usable
Too good… Its time to say bye-bye to cufon…
@Jayman Cufon definitely going down, its time for Google font API
I think it’s a bit overkill to suggest the dozen or so fonts are wide range!
This is great, simply explained too. Early days of course but it will be great to see the font library grow
“Huge collection of Font Typefaces to choose from Google’s Fonts library.”? What are you talking about?
There are merely 20 fonts in their library.
By the way, what advantages does this API have over the regular CSS font-face?
Yes, the current web font selection through Google is not great (18 I think). There are number of other services out there like http://www.FontsLive.com, which have a several hundred fonts to choose from, as well as webfonts.fonts.com which will have 7,000+ (currently in beta). Not free like Google, but selection and quality is better.
That’s exactly what I’m saying.
You can’t use them with Google’s Font API.
I, as a web developer, will probably use CSS’s font-face rather then Google’s Font API because I can’t find any advantages, only disadvantages.
And I will gladly stand corrected if given the chance.
Great and simple tutorial but I definitely recommend http://www.fontsquirrel.com/ over Google Fonts since there’s more to choose from, and I feel better implementing the code right in my CSS.
With the Google Fonts API though, you can also load multiple fonts by using a | to separate them. There’s also other cool tricks that you can read on the actual page.
Brilliant all round information on all the site very helpful everyone
Good information and thank you very much for sharing it because this is something I was looking for.
so cleary on explanation…
thanks mate ^^
Nice work; I’ll have to try this out soon.
what a big disappointment when I head down to the font library. It only offers, I think 12 fonts and none of the fonts are to my liking as a designer… i should go back to sifr instead
This only works on Google Chrome…meh.
Yes! This would be very helpful especially to those who were searching for much better and effective information see more utah web design this is a rare collection of talented designers delivers valuable solutions.