Design Shack - Web design showcase, CSS tutorials and web standards
About
Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.
How to Use the New Google Font API
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.
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.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Design Shack Google Font API Test</title> <link rel="stylesheet" media="screen" href="style.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
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.
<body> <div id="container"> <div id="headline"> <h1>Google Font API</h1> </div> <div id="subhead"> <p>You won't believe how easy this is. Just stop by <a href="http://code.google.com/webfonts">here</a> and choose a font. Then grab a link and a single CSS snippet and you're ready to go!</p> </div> <footer> <ul> <li><a href="http://designshack.co.uk/">Design Shack</a></li> <li><a href="http://code.google.com/apis/webfonts/">Google Font API</a></li> <li><a href="http://code.google.com/apis/webfonts/docs/getting_started.html"> Instructions</a></li> <li><a href="http://code.google.com/webfonts">Font List</a></li> </ul> </footer> </div> </body>
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.
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.
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.
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).
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.
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.
<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>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.
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.
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.
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.
Thanks, and yes I would say this is definitely a game changer.
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 {“
Unforunately – no unicode support
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.
Really another great step in font embedding.
Thanks for the article :)
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…
This will be a very good feature for websites if Fonts are used wisely.
Interesting, but I’m sticking with the kits free from http://www.fontsquirrel.com/fontface for the moment.
This another big hit for Google for Developer..
Another item on the “Cons” list is the nasty anti-aliasing. A definite put-off for me…
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”
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!
Still Google Font doesn’t have much features for now but looks like big potential for web developers.
One small step for web design, one giant leap for Google’s pr department.
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.)
Nice article about Google fonts. These tips are very useful for design. Thanks a lot.
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…
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!
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.
@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!
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!
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!
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.
wont this slow down the loading of the website…
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:
My code was deleted, I’ll try the code tag.
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
I’m impressed with Google created the font api. Look forward to more fonts being released and implementing this in new designs.
How i can implement this fonts in mobile devices.
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?
An small app to play with Google fonts
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
Well covered! I’ve used TypeKit and love it. I’ll checkout what fonts are available. Thanks!
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/
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/
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.