Quick Tip: Google Fonts API: You’re Going to Love This
videos

Quick Tip: Google Fonts API: You’re Going to Love This

on May 19th 2010 with 239 comments
Tutorial Details
Download Source Files
Demo View It Online

Google have made two huge announcements today. One of these concerns the Google Fonts API. Simply by linking to a particular font, stored on Google’s servers (save on bandwidth + caching benefits), we now have access to a wide array of custom fonts. Quite literally, you can integrate these fonts into your project in about 20 seconds. It’s as simple as that. Further, due to the operations being performed behind the scenes, these custom fonts will even be recognized back to Internet Explorer 6. I, for one, and am extremely excited about the possibilities, and the font catalog is surely to continue expanding over the coming years.


Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr.com?

One Step Only

To take advantage of the Google Fonts API, you only need to link to your desired font, and reference it within font-family. That’s it! When you find yourself integrating a custom font in less than 15 seconds, you’ll laugh with joy! For example:

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
	<style>
	body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }
	</style>
</head>
<body>
     Hello World
</body>
</html>
Custom Fonts

Crazy, isn’t it!? You can refer here for the current list of available fonts. So what do you think?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.engram.nu Niklas

    This is just great. Great I’ll tell you! Thanks for this note!

  • http://www.nouveller.com/ Benjamin Reid

    This looks very promising, good move from Google. Hopefully won’t take forever to expand the directory!

  • http://ajthomas.co.uk Alex Thomas

    VERY VERY COOL!

  • Darryl Snow

    Just to clarify, if this technique is employed on a website will visitors to that site still be required to download the font files in the background before they can be displayed? Just download them from google rather than the website’s hosting server.

    My concern is with non-roman font files which can often be much larger – chinese for instance must accommodate a minimum of 4000 or so characters, which means if you were to use something like @font-face you’d be forcing users to download a font file that’s several megabytes.

    Thanks!

  • Graham

    What about Anti-Aliasing ?, the fonts are rough at large sizes.

    • http://brianswebdesign.com Brian Temecula

      They are pretty rough at any size. This is what I didn’t like about Typekit as well, although it looks like Typekit has made some improvement. Hopefully Google will too!

  • http://www.pratikbagaria.com pratik

    This is great….
    As a designer I just love this… not much of coding required… no fees.. nothing…

  • http://twitter.com/simplyarun Arun

    Good stuff from Google. I wonder what will happen to typekit now. Major blow I guess.

    • bill

      Read the Google blog post about it. Typekit worked with Google together on this.

  • Dave K

    Im absolutely stoked about this… cracking cheese gromit

  • http://www.happylinks.nl Michiel Westerbeek

    Doesn’t work on iPhone ass well!

    • http://www.antonagestam.se/ Anton Agestam

      Lovely comment!

  • http://sideradesign.com paul

    this is historical!
    and I was planning on using the lobster font in a project anyway, so this will make it super easy.

  • http://cmstutorials.org krike

    wow nice work google, how easy :)

  • w1sh

    God bless us, everyone..

  • http://www.jakswebdesign.com Adam

    Absolutely stunning. Google, you’re almost making it too easy for the rest of us. No more complicated third-party Javascripts/funny font file formats. score.

  • JF

    Thanks for sharing this one Jeffrey ! Will use this for sure.

  • http://www.mjrportfolio.com Matt

    thank you google!

  • http://www.tastybytes.net Brian

    Seems like the same thing fontsquirrel.com is offering with the @font-face kits… except I do not need to rely on some 3rd party site for my site to look correctly

  • http://www.johndeszell.com John Deszell

    This is sweet, I can’t wait to try it out here soon on an upcoming site. Thanks for the heads up.

  • Aaron

    You’re right. That is ridiculous. I love it!

  • http://www.jordanwalker.net Jordan Walker

    This is going to be a great addition to the already over arching contribution by Google Inc.

  • Americo Savinon

    You got to love it! its Ridiculously easy and so powerful. Thanks Jeff

  • http://www.thephigroup.net Gareth Harte

    I hope they continue to add a whole slew of fonts to choose from!

  • http://www.davidkendallwebdesign.co.uk DaveK

    Pure awesome sauce!

  • Iivo

    Finally!! I’ve waited something like this for so long!

    The most positive thing that I find from this, is that all the fonts seem to have those native Finnish characters (that the English language doesn’t have) included. With that been said I can soon forget about the stress of letting your browser creating those letters for you with fonts, that don’t have these special characters in them. :)

    Now I’m also just waiting for more fonts to be included.

  • http://jerba.be Djerba

    Nice Api :)
    Google will index all textual details by bringing fonts and Typography issues ;)

  • http://www.giulianoliker.com Giuliano

    Wow! The biggest thing from Google since search. This is a game changer.

    • chris

      the only problem will be intranets and site using proxies

  • http://rethinkingcode.com TJ

    Thats great and easy however, what if the font you want to use isnt on googles list? I find that http://www.fontsquirrel.com/ @font-face generator is a better way to go. you can upload any ttf to an eot (for microsoft) svg, otf ect. if you want to use an otf, you can get a prog called font-forge to convert it to ttf and then use fontsquirrel.takes a little more working but worth it if you need that special font.

    more info here http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot

  • http://twitter.com/kirof Стоян Киров

    Google strikes again

  • http://www.warpconduit.net Josh Hartman

    This is an amazing breakthrough for web fonts!

  • http://www.google.com Drake

    This made my day.
    Actually, my week!

  • http://www.thadknowsweb.com Thad Bloom

    I wish I could love anything as much as I love Google.

  • Jak

    I wonder — is it possible that it is using font-face and returning the kind of font format that best suits the browser asking for it? Or does this work on browsers that don’t support font-face? I’ve only tried it on Firefox but people say it works on IE (and IE has apparently supported font-face for ages).

    (apologies if someone already mentioned this, I didn’t see it in any comments but I might have missed it)

  • http://www.sladewebsolutions.com Thomas

    Finally! A simple way to embed fonts.

    Nice to have another source that shows which fonts we can use without restrictions. Its always a pain to look into the licensing for each font.

    Part of being a great designer is knowing the secrets to getting great free material. This looks like another source!

  • jmarreros

    Very cool and very easy, thanks

  • Donna

    This is fantastic news!

    Chris Coyier over at css-tricks.com has more interesting detail on this.

  • http://hubpages.com/t/14f3b1 Web-E

    Its cool.Now blogger user can use the service.No more traditional fonts. :)

  • Aaron Z.

    It’s awesome!!! I just did a test and it works just fine.
    Can’t believe how simple this is!

  • http://coupon-wall.com Web host coupons

    Now I don’t need to set up a font face again nor worry about using cufon. That’s is so awesome.

  • http://ecocyn.com adam

    Would be nice if they merged this technology with the pre-established library of dafont.com.

  • http://www.seowisedesigns.com Yheng

    Oh my.. I’m lovin’ it! Nice move by Google.

  • http://www.cmstheme.net CMS Themes

    Another great service from Google!

  • http://www.vincentdepalma.com Vince DePalma

    I have compiled a package of all the Google fonts from the directory to download for use in Photoshop for al the designers out there.

    Download the font package here:

    http://www.vincentdepalma.com/embed-fonts-on-the-web/

  • http://www.zrixter.net Helven

    Google is my friend!

  • Joseph

    I’m excited about this, except when I clicked on the link to see the available fonts they look horrible. Not that the fonts are badly designed, but that they seem to be lacking any anti-aliasing. They appear quite malformed. Is there something wrong here?

  • http://www.gameuber.com Uber

    Ohh Google! you made me wet my pants in excitement.

  • ukasz

    Will we be able to write in Polish “ż ó ł ś ą ń ź” ?
    Know someone?

  • http://www.pixelsoul.com pixelsoul

    This is awesome. Google is always doing stuff that makes me :-D

  • http://edwardcalugtong.com Edward Calugtong

    This is really a good news from Google.

    Also created a blog post regarding this on my blog.
    http://edwardcalugtong.com/google-font-api

    Nice! :D

  • http://www.designfromwithin.com ThaClown

    This will change how typography looks on the web……

  • http://mediagearhead.com Giles

    Omg totally geeking out right now!!!

  • http://www.archivetr.net/ dellopos

    Thanx. Very nice.

← Older Comments
Newer Comments →