How to Use the New Google Font API

by on 20th May 2010 with 71 Comments

screenshot

Today we’re going to learn about what the new Google Font is and how to implement it right away in your designs.

It’s free to use and can be installed in under a minute once you get the hang of it!

Introduction

In the past year, there has been quite the explosion of options for implementing custom fonts on the web. Everyone knows the future of web typography is bright but no one knows exactly what the outcome will be.

Several companies have rightfully seen this budding technology as a way to make some cash. We’ve recently had an in-depth look at a few of the options available in this arena. Our articles on TypeKit and FontDeck show that these solutions are quick, easy and not altogether that different. These types of services will no doubt continue to provide tons of premium fonts at affordable prices for some time.

However, if you take a look at the really popular technology on the web, you’ll see a trend emerge: free. HTML, CSS, JavaScript, PHP, these don’t cost a dime to use. It’s therefore reasonable to think that the real future of web typography lies in a free solution that can be used by the masses with no strings attached.

A Game Changer?

Obviously, when Google throws its hat into any ring, it has a tendency to change everything. Recently, Google (in conjunction with Typekit) quietly launched a webfont API that could result in just such a long-term shift. While other companies are setting up memberships, payment plans and subscriptions, Google decided to forgo a members-only service completely in favor of providing a free and easy way for any web developer to quickly load custom fonts into a web design.

To see how it all works, let’s dive into a quick example. Before we get started, here’s a quick preview and live demo of what we’ll be building.

screenshot

The HTML

To increase the fun, let’s use HTML5 and CSS3 along with Google’s font API. That way we’ll really get a decent glimpse into the possible future of web design! Keep in mind that there are still some browser compatibility issues with these technologies. So if you’re using a sucky browser, just know that your experience will be scaled back a bit, but should degrade just fine.

The Starter Code

To start off, paste in a blank HTML5 code snippet.





 

 

 

 

 




This is a modified version of a starter file I found on Snipplr that contains a JavaScript hack to help good old IE along with HTML5.

The Divs

We’ll keep the page super simple and include only a headline, subhead copy, and a simple footer. This will give us three unique areas to play with. We’ll use these areas to implement two different fonts from the Google API.


 
    

Google Font API

You won't believe how easy this is. Just stop by here and choose a font. Then grab a link and a single CSS snippet and you're ready to go!

As you can see, I’ve used a h1 tag for the headline, a p tag for the subhead, and the HTML5 footer tag for the footer. For the latter I’ve thrown in an unordered list of links just to have something down there. Feel free to completely change any of this if you’re following along as it doesn’t really matter what you insert as long as you’ve got some copy.

At this point, you should have something basic and ugly like in the screenshot below.

screenshot

That’s all the HTML we’ll need! Let’s jump over to the CSS.

The CSS

For the CSS, I chose to implement a nice letterpress effect inspired by this Line25 CSS3 tutorial. On browsers that don’t support text-shadow, the text will still be perfectly readable and should maintain the Google webfont.

Basic Styles

First we’ll implement a super basic CSS reset and throw in a background color.

* {
  margin: 0;
  padding: 0;
}

body {
  background: #474747;
}

#container {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top:  100px;
}

The Headline

Next throw in some styles for the headline. We want a font color that’s darker than the background and a shadow color that’s lighter than the background to create that nice letterpress illusion.

#headline {
	width: 1000px;
	margin: auto;
	margin-bottom: 10px;
}

#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
}

Notice that we also centered the div and the text. I usually avoid centered web layouts for several reasons but this is merely to show off some text so a centered div works perfectly. If you don’t like it, feel free to left align your text.

The Subhead

Next up is the subhead or paragraph copy. We’ll style this essentially the same way as the headline only smaller.

#subhead {
	width: 1000px;
	margin: auto;
}

#subhead p {
	text-align: center;
	font-size: 2em;
	color: #222;
	text-shadow: 0px 2px 3px #555;
	margin-bottom: 100px;
}

#subhead a {
	color: #222;
	text-decoration: underline;
}

#subhead a:hover {
	color: #888;
	text-shadow: 0px 2px 3px #111;
}

Notice that we’ve also thrown in some link and hover styles. When the user hovers over a link, it will become a lighter color and the letterpress effect will become a normal shadow.

The Footer

Finally, we’ll turn our unordered list into a horizontal line of evenly-spaced copy.

footer {
	width: 500px;
	margin: auto;
	text-align: center;
	font-size: 1em;
}

footer a {
	color: #222;
	text-decoration: none;
}

footer a:hover {
	color: #888;
	text-shadow: 0px 2px 3px #111;
}

footer li {
	display: inline;
	list-style-type: none;
	padding-right: 25px;
}

Here I’ve applied link and hover styles similar to that of the paragraph copy and added some padding to space out the links.

Pre-font Preview

Notice that I’ve intentionally left out any font-family references. That’s because in our next step we’ll insert some of the fonts from the Google API. For now your page should look something like the screenshot below. Keep in mind that your fonts will likely differ based on the defaults in your browser.

screenshot

As you can see, our letterpress effect is working just fine. It’s subtle but makes the text look a little nicer.

Adding Fonts with the Google Font API

Now that we’ve got a basic page to play with, it’s time to load some fonts in! First stop by the Google Font API page and click on the Google Font Directory.

screenshot

Here you’ll see a brief list (currently 18) of fonts to choose from. Each font has several variants and sub-families to choose from. When you find one that you like, click on it to see the additional options. I’m going to choose “IM Fell” and the first family under this font (IM Fell DW Pica).

screenshot

When you get to the screen above, click on the “Get Code” tab. Under this tab you’ll find the code snippets you’ll need to insert the font into your web page. There are two ways to import the font: by linking in the head section of your HTML or by using an @import statement. We’ll use both to get a feel for how they work.

screenshot

Method 1: Head Link

First, grab the snippet of code that looks like the one below and paste it into the head portion of your HTML page.


Now copy the CSS snippet and paste it into your the headline and subhead sections of your stylesheet.

#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
	font-family: 'IM Fell DW Pica', arial, serif;
}

That’s it! Just two copy and paste actions and you’ve got yourself a fancy new webfont.

screenshot

Method 2: @Import

Now for the footer font, we’ll repeat the same process with one change. Find the font “Inconsolata” from the Google Font list, go to the “Get Code” tab and look under the “Font variants and advanced techniques” section for the following snippet:

@import url(http://fonts.googleapis.com/css?family=Inconsolata);

Simply paste this into the very top of your CSS page, then copy the font-family CSS snippet and paste it into your footer section.

footer {
	width: 500px;
	margin: auto;
	text-align: center;
	font-size: 1em;
	font-family: 'Inconsolata', arial, serif;
}

Voila! Now your footer should contain the Inconsolata font.

screenshot

Final Preview

Now that we’re all done, have another look at the final preview to see it in action. Click the image to see the live demo.

screenshot

For some more advanced control over font loading, check out the WebFont Loader, a JavaScript library provided by Google to help you tweak the process.

Pros

Needless to say, this is the single fastest and easiest webfont solution I’ve come across. I know I said that in previous articles, but these things just keep getting better and better! The lack of a sign up process is a real time saver for the Google system. Further, since you don’t have to go through the mess of registering specific domain names to license the fonts for, you can even test them locally in your development process! This seamless integration into my current workflow was a huge kicker for me as I hated developing locally with the wrong font and applying the custom font on the live page.

Like just about all of the popular webfont solutions, Google’s system is using @font-face to get the job done. So why not just do it yourself? Chris Coyier points out three main benefits in his article on the Google Font API: “Bandwidth savings (weight is on Google), Caching speed (same font used on multiple sites, browser cache kicks in), and Speed in general (Google’s CDN is faster than your site).”

So essentially it boils down to speed speed and speed! Just one side technical note in case you’re wondering: all of the text is fully selectable and copies/pastes very well. I hate it when custom fonts are selectable on a site but don’t copy correctly!

Cons

One of the biggest downsides is that there are currently very few fonts to choose from, which can really limit your designs. For instance, I was originally going to use a nice flowing script, but hated the two choices Google gave me.

Keep in mind that this system is still very new so you can expect to see it grow much larger as new free fonts are added. However, you’ll probably never see the quality and diversity here that you’ll get from a premium option like FontDeck or TypeKit.

Further, as the guys at FontSquirrel pointed out in a recent tweet, there is no SVG version of the font provided, meaning you’ll have to make your own if you want iPhone/iPad support.

My final complaint is that there are definitely some noticeable kerning issues with a few of the available fonts (again, keep in mind that they’re free). I’m a print guy so these really make me cringe. They’re probably possible to fix with CSS, it’ll just be a bit tedious and annoying.

Conclusion

The Google Font API represents yet another chapter in the story of @font-face methods for creating more diverse typography on the web. Though the font choices are currently limited, this is definitely the best implementation I’ve tried yet as it is just so quick and easy.

The ability to forgo a signup process and test locally without the headaches of specific domain registration are real winning features for me, but I’d love to hear what you think? Do you like Google’s system and if so will you use it? Use the comment section below to share your thoughts.

Comments & Discussion

71 Comments

  • http://www.ericdgreene.com Eric D. Greene

    Thanks, and yes I would say this is definitely a game changer.

  • Maris

    Thanks for such a great article!

    By the way, you got some type in CSS example at “The CSS / Basic Styles” about double “#container { #container {“

  • Srdjan Markovic

    Unforunately – no unicode support

  • grunion

    ugh. a wide selection of fonts at the disposal of the untrained eyes of developers and self taught web designers…. i’m going back to print. let the chaos and poor typography begin.

  • http://www.designfellow.com DesignFellow

    Really another great step in font embedding.
    Thanks for the article :)

  • http://www.perpetuumportfolio.com Matthias

    The problem I have with the great technique of using different fonts with @font is, that most of them look horrible at PCs. OSX renders them quite nice but every time I check sites out on a PC I am really frustrated and often go back using the fonts we always used…

  • http://www.illuminz.com Sanchit Thakur

    This will be a very good feature for websites if Fonts are used wisely.

  • Andy Piddock

    Interesting, but I’m sticking with the kits free from http://www.fontsquirrel.com/fontface for the moment.

  • http://espreson.net/ Espreson

    This another big hit for Google for Developer..

  • Pingback: Google Font API | Kavyansh Web Solutions()

  • http://riaanwest.tumblr.com RiaanWest

    Another item on the “Cons” list is the nasty anti-aliasing. A definite put-off for me…

  • Roxius

    puke:
    1995 called, It wants it’s Comic Sans back.
    Seriously… What kinda fonts are these?
    +1 for grunion: “let the chaos and poor typography begin”

  • http://jamesduncombe.com James Duncombe

    Got to try this out. Although, as others have said, the rendering under Windows doesn’t seem to be anywhere near as good as OSX. Still, I’ll give it a go!

  • http://www.cvul.com/ cvul

    Still Google Font doesn’t have much features for now but looks like big potential for web developers.

  • Pingback: kndesign.com.ar » Blog Archive » Google fonts api()

  • Pingback: In The Tech News « Caintech.co.uk()

  • Pingback: Use Google’s Font API in your Wordpress Themes | Sociler()

  • http://www.kliky.com Ed at Kliky

    One small step for web design, one giant leap for Google’s pr department.

  • Pingback: New HTML5, CSS3 and other web design developments « Designflair Thoughts()

  • Tired of Arial

    I am happy about this. I started way back in 1995 and absolutely tired of Arial. Sure, there are a handful of font options, but with Google behind this, it may become a standard plugin like Flash is/was (LOL).

    I’d really love to see a more elaborate example using one of the Google Fonts that has variants. As far as I can tell, there are no CSS samples using variants on Googles Font API pages. (Just how to call the variants.)

  • http://www.brooklyncaraccidentlawyeronline.com Brooklyn Lawyer

    Nice article about Google fonts. These tips are very useful for design. Thanks a lot.

  • http://willmoyer.com/plato/ 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/

    Let me know what you think…

  • http://adajer.byethost5.com/ David Reimer

    I was quite excited about this (I can live with that selection for now!) … but was frustrated by the “page jump” when the font replacement kicked in.

    Can anyone recommend some tips or techniques for reducing (or better, eliminating!) that nasty side-effect?

    Thanks!

  • http://www.highintegritydesign.com NorthK

    I agree that the fonts look really bad on my Windows 7 machine. Probably bad enough that I wouldn’t use them. Too bad, seems like a useful offering if the fonts rendered better.

  • http://willmoyer.com/plato/ Will Moyer

    @David “Browser behavior varies depending on the type of browser. Some will only display the text after the font file is loaded, others will use the fallback font from the font stack and then refresh the page when the font is available. The latter behavior is generally referred to as the “flash of unstyled text.” For browser details, see the Technical Considerations page.
    For greater control over how browsers behave while the font is still loading, use the WebFont Loader. http://code.google.com/apis/webfonts/docs/webfont_loader.html

    Hope that helps!

  • http://www.masssh.com/ Roland Jordan

    Nice but what about the @font-face css property? it’s almost the same and you can have any font you would like the only downside it the copy writes to that font because it’ll be available for everyone to download.

    Nice post and keep up the good work!

  • Pingback: Free fonts from Google | Hughes Blog()

  • Pingback: links for 2010-05-27 « Köszönjük, Emese!()

  • http://www.nikoslianeris.gr nikos lianeris

    I like the web font idea and google created yet another promising api.Another disadvantage I believe is the poor charset.It would be really amaizing if fonts’ charsets included Greek alphabet’s characters! :D.Anyways I like it a lot!

  • Ben

    why is it on ie7 (or is it the win os?) that the bits at the bottom of the font is chopped of and they all have rough edges? Is there a solution?

    I don’t think this is universal as I haven’t heard anyone raise it up with Google.

  • Pingback: [link] Daily Link - MacEntry()

  • http://yo27.com MACHBIO

    wont this slow down the loading of the website…

  • Pingback: Link Minggu Ini 300510 | DesainDigital()

  • Pingback: Link of The Week 300510 | DesainDigital()

  • http://www.myunv.com/ Sunny Singh

    Great article, but I hope you realize that you can load more than one font through one stylesheet. You sepearate them with the vertical bar | like so:

  • http://www.myunv.com/ Sunny Singh

    My code was deleted, I’ll try the code tag.


  • http://www.myunv.com/ Sunny Singh

    Sorry for the triple post, my code just didn’t show up so here’s the raw URL:

    http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica|Inconsolata

  • Pingback: [Webdesign ETC] Google Font API คืออะไร ทำไมเว็บดีไซเนอร์ควรรู้จักไว้? | เว็บดีไซน์ สอนออกแบบเว็บไซต์ Web Design()

  • http://www.bigtunainteractive.com Ada

    I’m impressed with Google created the font api. Look forward to more fonts being released and implementing this in new designs.

  • Nithya

    How i can implement this fonts in mobile devices.

  • http://www.designshack.co.uk Joshua Johnson

    Thanks for all the comments!

    Nithya, try using Font Squirrel @font-face kits for mobile devices. They

    Will, interesting Windows hack, why does a transform fix the problem?

  • http://www.dzone.com/links/how_to_delete_cached_file_on_client_side_.html Satya Prakash

    An small app to play with Google fonts

  • Pingback: 前端开发值得一看的文章(2) - 幸福收藏夹()

  • Pingback: How to use Google’s Font API with Blogger | Chintika()

  • Pingback: Web’de Yazı Tipi Sorunları ve Google Font API « Çöp Evim()

  • http://www.firmennest.de Falk Köppe

    Hey @all,

    we just released a Google-Font-Collection and a simple perl script to download all Google Font API fonts available to be used in Photoshop for example.

    http://www.firmennest.de/firmennest-blog/?p=648

    Cheers all

  • http://weekendcoder.net Peter Kahuria

    Well covered! I’ve used TypeKit and love it. I’ll checkout what fonts are available. Thanks!

  • Pingback: Seta Digital Blog » Blog Archive » links for 2010-06-22()

  • Pingback: Nethizmet Online kütüphanesi()

  • Pingback: links for 2010-07-16 « Peter’s Side Thoughts()

  • http://webdesignandsuch.com mike ilsley

    I’ve found that some fonts from the Google Font API don’t display properly in Chrome or Internet Explorer, I show the solution here:

    http://webdesignandsuch.com/2010/07/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

  • http://tips4php.net Jorgen

    You should try the new Preview tool for Google Font API. The tool makes it very easy to experiment with different settings and create the correct CSS. See more here: http://tips4php.net/2010/07/google-font-api-new-preview-function/

  • Pingback: 前端开发值得一看的文章(2) | 田园牧歌()

  • http://www.dotcompromotions.com.au Peter Summers

    It has massive potential and cant wait to see future developments. For now I am going to try to push the limits of what it can do and experiment so that I am ready when the better support arrives.
    Thanks for the cool article.

  • Pingback: How to use Google’s Font API with Blogger | freealldownload.in()

  • Kimberly

    I have a question? How do you have the link to your external sylesheet AND to googleapis and have them both work?

  • http://slugmandrew.com Drew Spencer

    Pretty cool, I played around with some of these a while ago, but now I see that many of the fonts have more variants, and more fonts have been added, I’m gonna give it a real look at sometime soon when re-styling my blog.

    Great tutorial. Thanks!

  • jessica gomes

    @joshua: i’m quite confused about cross browser compatibility of google font directory especially for iPad viewing. lately at other blogs i’ve heard that iPad support is done for google web fonts. is it true that google font directory now supports mobile safari (for iPad)?

  • http://crusaderservices.com/creditanddebtforum/index.php?action=profile;u=149736 Cecil Osen

    I’d have to concede with you on this. Which is not something I usually do! I really like reading a post that will make people think. Also, thanks for allowing me to speak my mind!

  • http://google.com bored

    th8is was helpfull

  • Pingback: 前端开发值得一看的文章(2) | w3er()

  • http://www.justwordpress.net steff

    this sounds great but any ideas if these is going to affect the loading time for a website?

  • http://instructmydesign.blogspot.com/ Dinesh Verma

    Google font api rocks … using three or four fonts but still my site is running lightnig fast.

  • http://0o.com.mx/ seo mexico

    I landed here because I was looking for a way to integrate the beautiful google api . And reading other pages I realize that in this year, has not changed structurally. That leads me to be less angry with google:)

    Thanks

  • http://www.anyfares.com Carolynn Vanschoyck

    Hi there, Have been searching for a site like this for some time. I have bookmarked your site and will be coming back soon to be updated of what’s happening.

    Travel, cheap airfares, discount airfares

  • http://www.allsports24.de/protein Proteine

    Welcher Bodybuilder weiss nicht, dass Proteine zum Muskelaufbau ben?tigt werden. Whey Protein ist das wohl bekannteste im Kraftsport, danach kommen das Mehrkomponentenprotein, das Eiprotein und das Sojaprotein. Diese sind wichtige Bausteine des menschlichen K?rper, vor allem Mehrkomponentenprotein, Eiprotein und Sojaprotein. Proteine bestimmten ma?geblich wie gesund, leistungsf?hig und muskul?s wir sind. Das biologische Alter des K?rpers wird durch Proteine ma?geblich mitgepr?gt. Whey Protein, Mehrkomponentenprotein, Eiprotein und Sojaprotein werden nicht nur zum Muskelaufbau ben?tigt: diese werden von jedem Menschen zum Leben ben?tigt. Ohne Eiweiss ist kein Leben m?glich. Der Muskel besteht aus Protein (Eiweiss) und Wasser. Demzufolge ist es ?u?erst wichtig, den K?rper mit unterschiedlichem Protein wie Whey Protein, Mehrkomponentenprotein, Sojaprotein, Eiprotein und anderem Eiweiss mit gen?gend Baumaterial zu versorgen.

    Eiweiss, Protein shake, Proteine

  • http://www.offshorecompany.cc sociedades offshore

    DNS servers all across the Internet will update themselves with your new site name. Once that happens, you will be able to access your site at its permanent address, offshorecompany.cc.

    sociedades offshore, soci?t? offshore

  • Pingback: Sesliparti.Com Seslichat,Seslisohbet,Kameralichat,Kameralisohbet,Muhabbet,parti,Parti Sohbet,Teknikpanel » Blog Archive » { CSS, XHTML ve Javascript }Sesliparti.com,Sesliparti()

  • http://www.boldbodyfitness.com/ p90x

    Love the idea of being able to choose what custom fonts we can use in our designs. Thanks for the news about this Joshua. I look forward to trying it out when I can.

    – Robert

  • http://desaya.com DESAYA

    Google’s web fonts are nice, I use them alot. At most I appreciate that Google expands the available fonts. They even support users, designers who like to create new fonts, and link to related Kickstarts at http://www.kickstarter.com – that’s cool.

  • https://www.youtube.com/ Www.Youtube.com

    I really like what you guys tend to be up too. This sort off clever work and exposure!
    Keep up the wonderful works guys I’ve incorporated you guys to my own blogroll.

    My web-site: this post (http://Www.Youtube.com)

Subscribe

Membership
About the Author