Build 10 classic Flash games and learn game development along the way with this ultra-fast paced game development course.

If you love this blog, this is the book for you.

Buy the book

Get the source code of 12 commercial Flash games, which have been loaded more than 50 million times!

Learn from real world successful examples.

Get it now

Box2D for Flash Games teaches you how to make Flash physics games from scratch with the most advanced features.

Create the new Flash game smashing hit.

Buy the book

Playing with Google Font API and WordPress

May 24, 2010 • Css, WordPress by Emanuele Feronato • 12 Comments

With new webdesign trends, standard fonts such as Arial, Times and Verdana aren’t enough to give our blog/website the loon&feel we want.

That’s why today we’ll discover the magic of Google Font API.

The Google Font API lets you include in your pages high-quality web fonts provided by the Google Font Directory.

This means you can use custom fonts in your design, and they are hosted and served by Google.

That’s nothing new, since services like Typekit are already on the wild for quite a while, and scripts like cufòn already enhance the beauty of most premium templates.

But unlike cufòn, texts rendered with the Google Font API are selectable, and there isn’t any copyright issue, and unlike Typekit, Google Font API is free.

So let me show you the simplest example…

Let’s take the CSS of this blog post titles:

and change the first line to

and then just add somewhere between <head> and </head> (normally in the header.php file located in your theme directory)

and… see the difference:

Nice, elegant and without any important downside, if you can bare with a small number of fonts (but don’t forget we are talking about Google, so expect the number to grow fast) and the lack of iPhone/iPad compatibility (hey… shouldn’t CSS heroes design a i/whatever specific layout anyway?)

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.25 out of 5)
Loading ... Loading ...
Template Monster offers you a great assortment of CSS Templates.
They can be a great start to launch a website of your own and meet the individual needs of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 12 comments

  1. Andreas Renberg

    on May 24, 2010 at 1:29 pm

    That’s a great way to standardize the use of fonts online.

    Some sites look funny for me in Linux since Times New Roman is a proprietary format, so font defaults to something else (and usually doesn’t show up right, so it gets cut off or bleeds over to a new row in some instances when using manually set width).

    However, if people are able to link to the font on Google code, they ensure that it will show up regardless if you have that font installed or not, and if enough websites link directly to the Google code fonts, they will be cached in the browser.

    There were some suspicions on the Kirupa forums who argued that because of the amount of time it takes to design one font, people will be reluctant to release it for free; unlike Wikipedia articles which take relatively little effort to write and publish.

    However, as you said, it’s Google, and if the users won’t contribute enough (which I still feel they will), Google will find a way to increase their repertoire of fonts.

  2. Will Moyer

    on May 24, 2010 at 2:17 pm

    I think I may have found a hack to stop the aliasing (jagged edges) on Windows machines. It only works in WebKit though, so I don’t know how useful it is.

    Check it out here: http://willmoyer.com/plato/

  3. uint

    on May 24, 2010 at 2:21 pm

    I love google! especially the upcoming “App Store”!.Just take a look here:

    http://code.google.com/intl/de-DE/chrome/apps/docs/index.html

    and here:
    https://chrome.google.com/webstore

    Goodbye Mochi:-)

  4. Tony

    on May 24, 2010 at 6:08 pm

    Thanks Man,

    This is awesome. I’m definitely going to have to look at using this feature in my blog posts ;)

  5. Using Google Font API - Tony Lea

    on May 24, 2010 at 7:48 pm

    [...] BTW, for a thorough intro of this feature, check out Emanuele Feronato’s Blog Post at: http://www.emanueleferonato.com/2010/05/24/google-font-api-and-wordpress/ [...]

  6. defensive netball zone

    on May 25, 2010 at 7:53 am

    [...] Playing with Google Font API and WordPress – Emanuele Feronato [...]

  7. Lorenzo

    on May 25, 2010 at 11:55 am

    it’s also can be used on flash?

  8. Jorgen

    on July 30, 2010 at 9:35 pm

    Google just launched a nice preview function for the Font API that makes it even easier to use the API.

    See more here: http://tips4php.net/2010/07/google-font-api-new-preview-function/

  9. Naushad

    on October 10, 2010 at 8:24 am

    Thanks a lot for sharing this..its the Best Solution for My Websites and My Clients Websites..

  10. Vlad

    on January 6, 2011 at 5:18 pm

    What I don’t understand is the direction. They will be for free or paid as on TypeKit. We can see on Google Fonts Webpage that they are partners with TypeKit.

  11. Tom

    on February 1, 2011 at 10:24 am

    If you are WordPress user you can use Ultimate Google Fonts plugin for WordPress with beqautiful CSS text effect tips http://www.sramekdesign.com/wordpress/plugins/ultimate-google-fonts-with-beautiful-css3-effects/

  12. Pacifista

    on October 5, 2011 at 5:13 pm

    wow…great.thanks for your sharing,buddy :D

< >