Everything a Web Designer Should Know About Google Fonts API

advertisement

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:

  • 1. Huge collection of Font Typefaces to choose from Google’s Fonts library.
  • 2. All the bandwidth load is on Google as you are only using their resources in the API.
  • 3. The speed is blazing fast as Google’s CDNs are faster than your site.
  • 4. You can hotlink the font file so that there is a less file and bandwidth request.

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>

Creating the Styling CSS

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;
}

Google Font API

advertisement

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.

Google's Font API

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

Google Font Directory

After that, click the Get the Code button on the top navigation bar and you’ll get two codes:

  • 1. A CSS file hotlinking code.
  • 2. A font family code, which you have to embed in your local CSS file.

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.

Final

Download ccna 640-802 design tutorials to learn how to design creative web designs and pass your comptia a+ and ccna exam using our certified resources.

About the Author:

Rishabh Agarwal is an Engineering student from India. In addition to that, heís also a passionate Photographer, a musician and a Web Designer. He writes about technology on his blog TechyLabs, and Photography on ShutterSkills.
  • Robert Alanso

    Saw tutorial for google font api in lot of websites but this one pretty easy and simple. Thanks Rishabh

  • http://shutterskills.com Rishabh

    Robert, Glad you found it interesting and usable :)

  • Jayman Pandya

    Too good… Its time to say bye-bye to cufon…

  • David Murray

    @Jayman Cufon definitely going down, its time for Google font API :)

  • James

    I think it’s a bit overkill to suggest the dozen or so fonts are wide range!

  • Pingback: Everything a Web Designer Should Know About Google Fonts API | RefreshTheNet()

  • Darren Keegan

    This is great, simply explained too. Early days of course but it will be great to see the font library grow

  • http://orenyomtov.com Oren

    “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?

  • Pingback: 155+ Really Useful Fresh Articles for Web Designers and Developers()

  • http://www.fontslive.com Andrew

    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.

  • http://orenyomtov.com Oren

    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.

  • http://www.myunv.com/ Sunny Singh

    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.

  • http://miadeo.com Diseño Bamug

    Brilliant all round information on all the site very helpful everyone

  • http://www.websitedesigningmumbai.net ovkriss

    Good information and thank you very much for sharing it because this is something I was looking for.

  • http://beben-koben.blogspot.com/ Beben

    so cleary on explanation…
    thanks mate ^^

  • http://sauceboxcreative.com Don Carroll

    Nice work; I’ll have to try this out soon.

  • Pingback: 155+ Really Useful Fresh Articles for Web Designers and Developers | SohbeTCix.NeT | Chat Sohbet Muhabbet Odaları()

  • Stone Deft

    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

  • http://www.beyondmidnight.net Jackie

    This only works on Google Chrome…meh.

    • ammyjames

      Nice write up,I would like to appreciate your uinuqe piece of writing and your approach of sharing ideas. Certified Database Administrator Exam Power Systems Exam Certified Business Process Analyst ExamSpecialist Exam XML Exam On Demand Business Exam

  • http://www.vimeo.com/13998771 fanmazing

    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.

  • http://njwebguy.com/about.php Chris Sansone

    I was just trying this out on my New Jersey Web Design site.

    I used two different fonts for my headings, figuring to see how it works so far as performance. Besides the fonts not looking all that great (in FF on windows XP), I was surprised to see that they didn’t even show up in Chrome. It just went to my font stack fallbacks.

    I didn’t spend a lot of time on it, but a main benefit is supposed to be that the link code can just be copy-pasted in and work without any fuss.

  • http://pkmcodedepo.ibogger.org/ faospark

    the google font api now works on all major browsers, in fact you can implement it using google loader along side with google friend connect, google Feed api, google visualizations and all of the google Library api’s. im using this one for my site

  • Pingback: Go Google: Socialize Your WordPress Blog without Using Plugins « social media, wordpress « KnowTeBook - Webworkers Daily Milk()