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. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! 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
Newer Comments →
  • intoavoid

    i am the only one who see fonts not very well rendered?

    http://i49.tinypic.com/j75e0n.jpg

    • http://www.paulpritchard.ca Paul

      Wow. Mine’s not that bad, but not good enough to use I don’t think. FF 3.6, Windows 7.

      http://imgur.com/4C9OB.gif

      • Markus

        Also on FF 3.6 and Win 7 and guess what.. rendering looks the same. So I probably won’t use it yet.

    • Brett

      What browser are you in?

    • Daniel Golden

      No, Paul seems to be having the same issue.

    • http://rewindstudios.com Jaybuz

      I think this happens when you declare your font size using px instead of em or pt.

      • http://scott-christopherson.com Scott Christopherson

        I tried out Lobster, set it in px value, and it looked perfect in Firefox 3.6.3, OSX.

    • intoavoid

      im at chrome in xp
      what is really weird is that i see all fonts wriken
      but those who has text-shadow
      are perfectly rendered
      weird that in chrome is not working good

  • Chris

    This is such perfect timing! I was literally just today looking for a solid atable way to embed a font into my client’s site! So awesome!

  • Guario

    Would this only work with HTML 5 or can it work with (X)HTML?

    • Rob Miracle

      It’s really not an HTML thing as much as a CSS3 thing. IE all the way back to IE6 (maybe even 5.5) has supported web fonts. Your Firefox 2.0′s might be in trouble, but this should work in most browsers.

      And for those that don’t, you would specify fall back fonts for the browsers that don’t support it:

      h1 { font-family: “Droid Sans”, Helvetica, Arial, sans-serif; }

      And if your browser can’t handle this feature it will gracefully pick up Helvetica or Arial.

    • http://www.philohermans.com Philo Hermans

      This will work with both versions of HTML

    • http://www.3eighteenmedia.com 3eighteen media

      You’re just importing one line of code (a stylesheet), so this should work everywhere, HTML5 or otherwise.

    • Matt Oakes

      HTML5 is very similar to XHTML. It will work perfectly as long as the browser supports the CSS @font-face or whatever IE does to support this sort of thing.

    • http://www.duncanmcdougall.co.uk Duncan

      As this is just a case of including an link to a stylesheet this is 100% valid xhtml.

  • Rob Miracle

    This is a moment where you reach to the Guiness beer commercials for their “Brilliant” line. This is genius. The only issue is lack of fonts. If they had say another 50 fonts across various types, we would be golden.

    It couldn’t be any easier……

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Agreed. And I’ve no doubt that they’ll continue adding more fonts. So that won’t even be an issue in a year’s time, most likely. :)

    • Barry Cogan

      My sentiments exactly. Excellent tip Jeffrey, thank you! :)

    • http://www.stavdi.com Mathias M. Stav

      There are many free fonts available for use on web, just take a look at http://www.fontsquirrel.com.
      Hopefully googles list will be as big as their soon :)

  • Matt

    Jeffrey, I love you.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks. Should we go out? :)

      • Matt

        You pay for the tickets, I’ll spring for the popcorn.

      • http://craigps.info/ Craigsnedeker

        lol!

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Hmm – Tickets usually amount to about $18. Popcorn, around $6. Not a very good deal for me.

      • Matt

        Be less of an economist and more of a wealthy designer, GOGOGO!

    • http://www.stavdi.com Mathias M. Stav

      and thank google!

  • http://www.twitter.com/mikilimixn Miles

    I’m proud to be the first to comment on this. Huge, huge stuff! Thanks for the quick tip, GREAT!

    Miles

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Congratul….oh wait. … :)

  • http://www.ryanscottlee.com Ryan

    Wow! This is fantastic!

  • marques

    this is so awesome! I can’t wait to see that available font’s list grow

  • http://davidturner.name/ David Turner

    I just went through one of my projects that was using one of the fonts that Google now host using this service. I’d previously put my own @font-face package together but the google version simply worked better. Might be that I didn’t include all the font-weights or something, but this service makes embedding fonts VERY easy.

    I also love how you don’t even need to link to a stylesheet, you can simply @import them into your main css file, keeping everything in one easy to find file.

  • must

    Really nice from google!

  • http://ollieparsley.com Ollie Parsley

    I am going to make a website this evening just because I want to see how simple it is to use :P. I nice addition to their font library was the Droid font they use in Android and its got an Apache 2.0 licence so you can use it anywhere :)

    Ollie

  • http://www.ericditmer.com Eric Ditmer

    This is insanely awesome!

  • http://alexstone.me Alex Stone

    Awesome! I can’t wait to start using this in my current web app I’m working on.

  • Joaquin Revuelta

    Wow! That’s all I can say :))

  • http://www.paulpritchard.ca Paul

    Ridiculous. So long as that library grows and grows, this will make designing websites that much better.

    • http://www.paulpritchard.ca Paul

      Waiiiiiiiiiiiiitaminute. Why so pixellated? http://code.google.com/webfonts

      • David

        Whoa…you’re right. They look pretty bad in FF

  • http://craigps.info/ Craigsnedeker

    WOW THIS IS COOL!

  • http://twitter.com/xrommelx xRommelx

    Awesome tool =)

  • http://www.kriesi.at Kriesi

    Thanks for sharing. This is nothing short of amazing. Cufon was already simple to use compared to sifr but this is just ridiculous easy :D

    Even my grandma could use that ;D

  • http://www.philohermans.com Philo Hermans

    Very nice! :)
    Hoping to see some more fonts in the future though :P

  • Keith

    Hah, and I paid for a years subscription to TypeKit!

  • http://craigps.info/ Craigsnedeker

    It’s as easy as frosting!!!

    • Matt

      Like eating frosting from a jar or frosting a cake. The latter is harder than the former.

  • Daniel Golden

    This will replace sifr, cufon, etc. right? I mean, I can’t get in trouble for embedding fonts I don’t own because I’m not embedding them. Right? If this means what I what I think it means, I am amped beyond belief.

  • http://www.sig.ly/ Nico

    I believe it will work without HTML5 as well.

  • http://www.appchain.com Ciprian

    This changes everything! OMG! google is…… google!!!

  • http://zecch.in Zecchin

    HA! This is amazing news.

    Will be testing this on my next theme for themeforest.

  • http://brettjankord.com Brett

    I’ve been using Font Squirrel and embedding fonts with it lately. It has been super easy and very successful. I’m interested to try this method it out. Looks very promising. I wonder if this is what they used in the Sports Illustrated demo at the I/O conference. The typography they had in the demo was amazing.

  • http://themeforest.net/user/tigerthemes tigerthemes

    Amazing stuff Jeffrey, definitely using this in my project I’m working on right now. :-)

  • http://www.mattonik.sk/ Martin Maruša

    Wow, this looks great. Is it really so easy?
    What’s going under the hood? How about embedding more font families at once?

  • http://themeforest.net/user/unisphere/portfolio unisphere

    This is absolutely brilliant, If the font directory starts to grow, I don’t see myself using Cufon anytime soon in my themes.

    Thanks Jeff for another great quick tip :)

  • http://www.markdijkstra.eu Mark Dijkstra

    That simple? Nice :D

  • http://themeforest.net/user/themolitor?ref=themolitor THE MOLITOR

    OMG!

  • http://www.beperceived.com Chris Schmitz

    This is amazing!

    I noticed that this only provides the regular version of the font (no bold or italics). Any idea if they have intentions of offering the other font styles or increasing the number of fonts they offer?

    • Brett

      After checking out the available fonts these are my thoughts exactly. I’m curious who will be approving fonts/how one submits a font to be in their library?

    • Daniel Golden

      A few of them include variations (i.e. The very first named Cantarell).

  • David

    This changes the game big-time! Now it’s a matter of them growing their font catalog, but this is HUGE!

  • michael

    niceeee ;)
    Helvetica would rule ;)

  • Simon Longson

    I’m so glad someone like google have taken this under they’re belt, it’s the only chance we really have of getting something like this go mainstream!

    It’s so exciting!

  • http://prootime.ru Axel

    very cool and usefull))

  • http://matt-bridges.com Matt Bredges

    Oh…my…goodness! This is a web developers and web designers dream come true! I knew I loved Google! Great tip, Jeffery. I would have missed this for a few days if you hadn’t made this a quick tip. Google fonts, here I come!

  • Keith

    Wow, this is going to be amazingly useful, especially once they expand the library.

  • http://www.orwelldesign.co.uk Gary

    Blimey Crikey!
    If you are a designer of fonts, is there a procedure whereby you can submit your font so the the Googlebods can make it available to all via this whizz bang method?
    G

  • Julian

    If you guys weren’t here, I’d probably hear about this stuff next year. Keep up those quick tips!

  • http://www.braineye.net/be/ hassan yahya

    Awesome ! .. but i have to wait till it will available in my language (Arabic) :( !

    Thanks ^_^

  • Mike

    you were right…nearly cried from joy :’)

    can’t stop thinking of the possibilities. Google…always ahead.

    Though i’ll probably still use Cufon for anti-aliasing on huge fonts, this is amazing. The next few years (and previews) are gonna be amazing for web development. LOVE it

  • http://www.doom-design.com Doom

    Wow, that sounds terrific!

    But this isn’t the same as @font-face, right? It’s only JS?

  • http://www.engr.uky.edu Chris

    The ease of use is pretty incredible. Thanks for the update.

  • Willson

    Wow! That’s awesome, can’t wait to try this out and see more fonts.

    Thanks Jeffrey!

  • Jesse

    Wow… this plain rocks.

  • http://sixonefive.net Mike McAlister

    Hooooooly awesome. Honestly though, it’s about time the process has been simplified.

  • http://bradjohansen.com Brad Johansen

    Wow… It’s almost to easy. This is perfect for the site I’m working on.

  • http://blog.jackbliss.co.uk/ Jack Bliss

    Psst, use a webkit browser for the best effect, *wink*

    Looks fantastic in Chrome. Get ready to see a lot more Lobster across the web!

  • http://www.j2designstudios.com Jim

    Awesome! That is going to be really helpful!

Newer Comments →