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:
<!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
Join our newsletter!
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
This is just great. Great I’ll tell you! Thanks for this note!
This looks very promising, good move from Google. Hopefully won’t take forever to expand the directory!
VERY VERY COOL!
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!
What about Anti-Aliasing ?, the fonts are rough at large sizes.
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!
This is great….
As a designer I just love this… not much of coding required… no fees.. nothing…
Good stuff from Google. I wonder what will happen to typekit now. Major blow I guess.
Read the Google blog post about it. Typekit worked with Google together on this.
Im absolutely stoked about this… cracking cheese gromit
Doesn’t work on iPhone ass well!
Lovely comment!
this is historical!
and I was planning on using the lobster font in a project anyway, so this will make it super easy.
wow nice work google, how easy :)
God bless us, everyone..
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.
Thanks for sharing this one Jeffrey ! Will use this for sure.
thank you google!
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
This is sweet, I can’t wait to try it out here soon on an upcoming site. Thanks for the heads up.
You’re right. That is ridiculous. I love it!
This is going to be a great addition to the already over arching contribution by Google Inc.
You got to love it! its Ridiculously easy and so powerful. Thanks Jeff
I hope they continue to add a whole slew of fonts to choose from!
Pure awesome sauce!
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.
Nice Api :)
Google will index all textual details by bringing fonts and Typography issues ;)
Wow! The biggest thing from Google since search. This is a game changer.
the only problem will be intranets and site using proxies
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
Google strikes again
This is an amazing breakthrough for web fonts!
This made my day.
Actually, my week!
I wish I could love anything as much as I love Google.
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)
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!
Very cool and very easy, thanks
This is fantastic news!
Chris Coyier over at css-tricks.com has more interesting detail on this.
Its cool.Now blogger user can use the service.No more traditional fonts. :)
It’s awesome!!! I just did a test and it works just fine.
Can’t believe how simple this is!
Now I don’t need to set up a font face again nor worry about using cufon. That’s is so awesome.
Would be nice if they merged this technology with the pre-established library of dafont.com.
Oh my.. I’m lovin’ it! Nice move by Google.
Another great service from Google!
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/
Google is my friend!
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?
Ohh Google! you made me wet my pants in excitement.
Will we be able to write in Polish “ż ó ł ś ą ń ź” ?
Know someone?
This is awesome. Google is always doing stuff that makes me :-D
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
This will change how typography looks on the web……
Omg totally geeking out right now!!!
Thanx. Very nice.