Quick Tip: Google Fonts API: You’re Going to Love This
Tutorial Details
- Topic: Google Fonts API
- Difficulty: Beginner
- Estimated Completion Time: 2 Minutes
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:
XEROX CODE
<!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>
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 Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Honda Malta - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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”.
another troll afraid of the clouds….
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.
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
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?
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.
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.
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?
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.
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.
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
DNS has a cost.
well it does not work on FF 3.0. enough said..
awesome will help.
I wish they have Helvetica.
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 :/
Google is just awesome!!!
TypograpyTypograpyTypograpy!
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; }
…but doing so you can’t validate your CSS. Can you?
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.
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/
facebook and google will dominate in every aspect of our life
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.
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.
I suppose you couldn’t use licensed fonts, I wonder how Google would govern it?
Sweet. the list will be interesting to follow. nice and simple too.
Excellent script!
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..
I can’t wait until they release some more fonts.
I’ve actually used this font API on my blog.. http://www.thedailyguitar.com
If you happen to use Drupal as your CMS.. Check out http://drupal.org/project/google_fonts to implement Google Fonts in your website!
Now, THATS awesome!
Literally took you 2 sec
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)
Any way thanks for heads up rely useful
Fantastic news!
It’s damn nice and cool
thanks for the tip.
its a nice and quick way to control fonts but unfortunatly google offers a very dull list of fonts..
wow, well that’s a short cut isn’t it!? gonna have to try it out.
It’s good to see that google has released another wonderful product. But @font-face and cufon are even more flexible.
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?
How to add custom fonts here??
Love the simplicity.
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!
it wont work on my site
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/