Google API Fonts – GenX Web Typography

“Typography Is what Language Actually Looks Like” By Ellen Lupton

It is actually true when it comes to typography, be it— Print or Web. If you say content is the King, then, typography provides a right direction and approach to it. Based on one’s experience and imagination, its a two-dimensional architecture as it has been structurally described by Hermann Zapf. It plays a key role in tuning on the tone, theme and message of the website.

Google API Fonts - Image 1

Not late enough, but we have always lacked in rich, constructive and creative web typography. We have  fixed ourselves to some limited set of web fonts known as the Web safe fonts and do not have many fonts installed and supported.

For instance, The Morning News makes use of neat and aptly-spaced fonts to be able to create a subtle atmosphere.

There is actually no denying to the fact that Print Typography has all the liberties and license to use all the possible font types one can ever imagine. But, with the launch many web browsers including IE, this divide between the Print and the Web Typography is collapsing. Now, there is no need to restrict yourself to Serif or sans-serif font types.

And, Google has come up with Google Font Directory and Google Font API that serves the need of the web designers as well as the website owners  in an efficient way. Anyways, this post is an attempt to be able to take a sneak peak into what is Google Font API all about and what are the certain advantages that this service provides, and how to go for them.

Google Font API… What is it?

As always, Google is ready with all the answers and all the possible services. Have you ever wondered about the many non-standard fonts, used on the websites. These are provided by the web service known as the Google Font API  that are used on the websites. Under the open source license and served by Google servers, a font directory is available to be able to use different and unique, actually quite “out of the box” fonts for your website.

Google API Fonts - Image 2

What Purposes Do They Serve?

It’s all about making the web faster and richer for everybody. We’re not collecting any personal information for web font requests, and only aggregating the logs at a coarse level so we can keep track of performance and overall popularity of fonts.

One of the great things about this service, just like the AJAX libraries (such as our WebFont Loader), is that many different sites can link the fonts, and they’ll all share the browser cache – it’ll only trigger a network download for the first one,” said Raph, a typedesigner that worked on Google API team.

  1. A high quality open source fonts does not use images and CSS, therefore, they become web accessible.
  2. As already mentioned that it does not use images, but only HTML, therefore, if you make changes in your existing content then, the only thing it requires is the CSS update.
  3. The web fonts are SEO-friendly.

The question, which now arises is how to make use of such service? Just as the Google, the use is very general, and you don’t need to do anything with its technicalities. Adding one Style sheet Link Element would serve the purpose. Then, you are all ready to use the ample of non-standard fonts.

All you need to do is to follow certain steps :

  • Make a search on the Google’s font selection, and then, you would be availing ample of fonts, such as, Cardo, IM Fell, Josefin Sans Std Light, Lobster, Reenie Beenie and Tangerine. Make a choice and then, follow the basic format which is;
  • You style your HTML elements by using the font name using the font-family CSS attribute.
  • Its always advisable to have a strong backup plan. You never know, when something go wrong. At least, you would have a default font to opt for.
  • Always remember not to create multiple requests because it leads to an increase in the number of HTTP requests and serves no purpose, but increases page response time.. Its better to use href property rather than using multiple stylesheet link tags.
  • To be able to use style variations, use a colon (:) to the font name without spaces in between them followed by variation that can be : bold, italic, bold italic.

Not only this, but if you ought to have multiple variations, then you need to separate them by commas without space.

The Web Industry and the world of web designers is laden with pioneers and they keep coming up with different and altogether unique web fonts. So what you guys waiting for? Start using Google API Fonts and I am sure that there are a lot more to come up.

About the author

Mark Wilston is a Content Writer and marketing professional working with pixelcrayons (a reputed Web & Mobile Application development company). He loves to read and write different blogs related to web design and technologies. Contributing in a blog post aids him spreading the words online with a new set of people.

You can also follow PixelCrayons on Twitter

Written by CrazyLeaf Editorial

Follow us on Twitter @crazyleaf , Facebook , Pinterest


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.






Visual Similarity Duplicate Image Finder Giveaway

Designious Vector Packs and Photoshop Brushes Giveaway Winners