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
  • http://www.thealexandrian.net Justin Alexander

    Everyone is concerned about the impact Facebook is having in becoming a pervasive presence in our lives, but I’m far more concerned by the deep dependence Google is creating on itself through its push for “cloud computing”. Cloud computing is basically a code word for “if Google ever goes away or decides to shut down their servers or start charging for a particular service, then you’re all screwed”.

    • Michael Kral

      another troll afraid of the clouds….

      • sibelkacem

        Having different opinion than yours means being a troll? He at least provided some logic of thinking, you only flamed him without any reasoning – guess who’s closer to being a troll.
        Although the vision he depicts is extreme and I disagree with it, it is still valid concern generally.

    • shag

      sure, but isn’t that true of any company that hosts websites or online services? I don’t count on Google to make my coffee or tuck me in. I’d probably fair pretty well without her. I’d just have to pay for an analytics package ;)

    • http://elucidmarketing.com Elucid

      if Google ever goes away? LMAO … if u can list 3 possible reason they could disappear without a supervening event or natural disaster, then I’ll believe you. Google is very much a dependence to web users & developers… that’s why it’s a platform for alot of things we overlook. Just think how Google maps could have been a separate company, but they’re basically giving it to the web world to enhance and push forward. They have amazing open source policies & great support for developers. If other companies would stop jumping on every invention they create, they can sort out this fast paced tech advancements. And do you actually think Google is worried about charging us? They are glad to keep things cheaper than competitors, if not free … Voice, Docs, Wave! I trust Google and feel comfortable with Facebook, as most of revenue is by advertising, the most logical approach since a “pool of users” is worth alot to a marketing company. Which social network charges a fee? only Ning? and they will be the example of why other don’t do it. Why risk your billion dollar valuation?

    • Fábio Antunes

      Justin has a good point. One i always take in consideration when I’m relying on another entity to serve a special content or service.

      My idea is using Google to give you the fonts (saving some work), but store them your self not relying on Google for that, because Google can always “pull the plug”.

      However there are great services that Google provides that you depend on them to serve those services (Google Maps for example).
      Google servers failing is unlike but possible, once it as already happen.
      But its possible and likely that one day they will charge for these services.

      Either way. This is a great tutorial bringing us one step closer to deliver pixel perfect Fonts to all Browsers.
      As always good work Jeffrey Way, you always lead the way on this subject.

    • http://www.alexwillms.com Alex

      It’s only “dependence” if you absolutely must have the custom font. If it’s nice but not necessary, just degrade to a web font for backup. Not the end of the world.
      But I agree, I would rather have my important stuff on my desk, not in the cloud.

    • Danis

      I agree with Justin. Google doesn’t provide this service for charity. Noone does. As soon as the dependency is high enough they can begin to charge. And most likely they will.
      In this particular case though it’s not really a dependency.

  • http://wwwfoliothemes.com mark

    This is not yet supported on the iphone, ipad and android…

    How or does it degrade on these devices? Can you define what fonts it falls back to?

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

      Sure – it falls back to the second font that you’ve specified. For example: font-family: ‘Lobster’, arial, serif; — On the iPad, it would render the font in Arial.

  • http://www.evanbyrne.com Evan Byrne

    The smarter thing to do would be to just download the fonts and upload them to your own website. Then if something changes on Google’s server you don’t have a problem. Sure, you will use more bandwidth, but the less external dependencies your website has the better. Keep in mind there is nothing stopping Google from flipping the switch on this if things get out of hand.

    • http://disk17.com Travis Vignon

      Actually, Yahoo did a pretty extensive case study of how HTTP requests and even the order of your tags effects the speed of a website. Not only would you take up more bandwidth by hosting the files yourself, but you would also slow down the page because a browser will only make 2-4 parallel connections at a time. If you have the opportunity to offload a connection (to Google in this case), you should.

      If you want more info, check this out:

      http://developer.yahoo.com/performance/rules.html

      • gr0b1

        DNS has a cost.

      • http://ariadng.com ariadng

        thanks for this useful link ;)

  • jcc

    well it does not work on FF 3.0. enough said..

  • http://www.code-pal.com Wicked Sunny

    awesome will help. :)

  • http://12circles.tk Jay

    I wish they have Helvetica.

    • Mike Burroughs

      My guess is that all these fonts are OpenSource, or made by Google (to think Google has become a foundry…oh, dear…). Helvetica, sadly, is very much so a commercial font, and one of the more expensive at that. That is why Microsoft opted to stop packaging it with Windows and make their own in-house version, Arial, early on. Not to mention that Helvetica is not licensed for use @font-face use, which this either is or is very similar to. Sorry :/

  • http://www.slicedmedia.net/ Wes Peery

    Google is just awesome!!!

  • Luke

    TypograpyTypograpyTypograpy!

  • http://photoblog.flanisoft.at Daniel

    I like it, but I don’t see what’s the new thing here. Or am I missing something.
    I mean I can use any font I want – just upload it, use about three lines of CSS and I’m ready to go – no need for google here.

    E.g.

    @font-face {
    font-family: ‘MyFont’;
    font-style: normal;
    font-weight: 400;
    src: local(‘MyFont’), url(‘anyFontTypeYouHave/Own.TTF’) format(‘truetype’);
    }
    body { font-family: ‘MyFont’, serif; font-size: 100px; }

    • Luke

      …but doing so you can’t validate your CSS. Can you?

      • Mike Burroughs

        If you’re validating as CSS3, yes, you can. I want to see these style sheets because I have a feeling that that is all this really is. I just can’t wait ’till @font-face is completely supported, because I hate SIFR.

  • http://willmoyer.com/ Will Moyer

    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/

  • http://ardianys.com/ ArdianYS Free Prestashop Theme

    facebook and google will dominate in every aspect of our life

  • http://www.nashvilleinteractive.com Nashville Web Design Guy

    Don’t rely too much on the Google! Seems cool but the 40k demo size concerns me. Small in the grand scheme of things but still. sIFR is about the same size and I’m sure it’s much more consistent across browsers.

    • Luke

      IMHO sIFR is not a great solution.

      I’m using a Flash blocker on my browser, and I see way too often that sIFR white bar where a h1 should be.

  • http://www.brillcreative.co.uk rich

    I suppose you couldn’t use licensed fonts, I wonder how Google would govern it?

  • pyemachine

    Sweet. the list will be interesting to follow. nice and simple too.

  • Dennis

    Excellent script!

  • http://comingsoon... udi

    WOOOOOOOOOOWOWWW… Thanks for the HOT HOT news man.. I am extremely exited and I am waiting for google to come up with more and more font styles so we dont have to use flash for h1 tags.. :D

  • http://www.oe-design.com/ Danny Dyson

    I can’t wait until they release some more fonts.

    I’ve actually used this font API on my blog.. http://www.thedailyguitar.com

  • http://www.bariswanschers.com/ Baris Wanschers

    If you happen to use Drupal as your CMS.. Check out http://drupal.org/project/google_fonts to implement Google Fonts in your website!

  • http://www.nettguider.net Mads

    Now, THATS awesome!

    Literally took you 2 sec :)

  • http://e-skaitykla.lt P.S.

    Hi,
    What I really lowed about this is performance. With Typeface you get whole table generated and characters are loaded as images in the table`s cells. That is just ridiculous! Now I looked at this API`s generated source guess what? Nothing like that I thought something was wrong… And it is not I think that this has grate future and it will solve a lot of trouble trying to explain designer that using that font will make website load like whole Internet eternity (like 5sec) :D
    Any way thanks for heads up rely useful ;)

  • http://www.templateslord.com Marko Petkovic

    Fantastic news!

  • http://codendesign.blogspot.com nXqd

    It’s damn nice and cool :x

  • sidman26

    thanks for the tip.
    its a nice and quick way to control fonts but unfortunatly google offers a very dull list of fonts..

  • http://WIP Luke

    wow, well that’s a short cut isn’t it!? gonna have to try it out.

  • http://www.skmvasu.com skmvasu

    It’s good to see that google has released another wonderful product. But @font-face and cufon are even more flexible.

  • rajrana

    i’ve tried all font techniques including this and there is no solution to the delay you see. i’m surprised its not been mentioned here. has anyone else experienced this delay, and more importantly has anyone found a solution to it?

  • http://www.twitter.com/mamunabms Abdullah Al Mamun

    How to add custom fonts here??

  • http://www.iconfinder.com Martin Leblanc

    Love the simplicity.

  • http://www.praeterdesign.com Josh

    The font-family web source I think is far superior is webfonts.fonts.com just got done adding it to my “under contruction” page. Super easy!

  • http://stressedclub.blogspot.com ben

    it wont work on my site :(

  • http://tips4php.net Jorgen

    Google has now launched a nice preview tool for the Font API which makes it very easy to play around with different settings and create CSS:

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

  • http://www.webdesignandsuch.com BeantownDesign

    Sometimes the fonts don’t work in all browsers (IE and Chrome), which sucks. I have a solution here: http://wp.me/p11izc-ev

  • Bob

    The fonts all look awfull jagged at small sizes on Windows 2000 / IE6 and on Windows Vista / IE8 and a little bit better at larger sizes (100+).

    As it is now, I would never recommend it as most users are using Windows / IE. The quality is not good.

    Google themselves even use a png image to show the end result on their home page:

    http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html

    The necessary code:

    <link href=’http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>

    body { font-family: ‘Tangerine’, serif; }

    The png link:

    http://1.bp.blogspot.com/_WEcneQZVud0/S_N9ruwRRFI/AAAAAAAAACc/_nzj38oWHUU/s400/Tangerine.png

  • http://www.saroverhees.be Saro

    You sure sound excited :D!

  • http://www.soloibiza.com Ibiza

    Yes, pretty, but…How does it affect SEO? A text, a picture, both, more weight?

  • http://www.goldninjar.net GNJ

    How to use it on ning site?

  • http://www.facebook.com/mittul.chauhan Mittul Chauhan

    i really found it useful. thanks so much

  • http://www.kreativfont.com/ Kreativ Font

    Yes, Google Webfont is a really nice service from Google and, best of all, it is free … Thanks Google.

← Older Comments