Despite the nascent technologies and web startups on the Web, one thing we’ve lacked in the recent past was rich and beautiful web typography.
Though we have so many typefaces to choose from, we could only use a specific set of regular fonts installed and supported by most computers — these fonts were collectively known as Web-safe fonts.
Web Typography versus Print Typography
The very heart of content creation in traditional media (newspapers, magazines, books) is its creative license to utilize typography.
But now, the divide between print and Web media is shrinking with the support of @font-face on many modern web browsers (including Internet Explorer, who’s had support of it since IE4.0).
Enter Google Font API
Google has introduced the Google Font Directory and Google Font API, a free web service that allows website owners the ability to utilize other fonts outside of the Web-safe fonts cadre in an easy, convenient, and resource-efficient way.
The Google Font API is a fresh entry to the Font-as-Service niche that includes TypeKit, Typotheque, and others.
So let’s take a plunge into the untapped potential of Google’s Font API.
What is Google Font API?
OK, you surf the Web a lot, but have you seen many non-standard fonts used on websites or blogs around?
Let’s define non-standard fonts to mean anything apart from Web-safe fonts such as Arial, Helvetica, Verdana, Georgia, and Times New Roman.
Outside of design-oriented websites and blogs (e.g. on the mainstream Web), probably not many.
Google Font API is a web service that supports high-quality open source font files that can be used on your web designs easily.
The font collection will hopefully keep growing to give you the ability to choose many more types of fonts.
Advantages of Using Google Font API
If you decide to use Google’s Font API, here are some of the things you’ll be able to take advantage of.
Keep Using HTML Text
Unlike using images or CSS-background-image replacement, using @font-face as a solution to prettier web typography is more SEO-friendly.
In addition, it’s an unobtrusive solution, meaning that you don’t need to modify any of your existing content — you just update your CSS stylesheets.
Web Accessible
Because you’re using HTML text and not an image or CSS-background, it doesn’t affect people who use screen readers.
High Uptime Infrastructure and Reduction of Your Web Server’s Duties
By offloading your @font-face needs to Google’s reliable infrastructure, you can be assured of the fact that serving the font files will be fast and that you are relieving your own server’s work.
How to Use Google Font API
You don’t need to be a hardcore web developer to use Google Font API. To use Google Font API, all you need to do is add one stylesheet link element in your web pages and then you can start using that font in your CSS.
Here’s the generalized process of using Google’s Font API:
Step 1: Add the Stylesheet Link with Your Preferred Font
Search Google’s font collection to see what available fonts you can use. The basic format for including a certain font on your own website is:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
Step 2: Use the Font to Style Your HTML Elements
In the example below, you’re assigning your <h1> elements the font called Font Name using the font-family CSS attribute.
h1 {
font-family: 'Font Name', serif;
}
If you only need the font for a single use, you can declare your style inline.
<p style="font-family: 'Font Name', serif" >Six Revisions Is Beautiful</p>
Step 3: Always Have a Backup Plan
You might have noticed in the above code samples that I’ve used serif as the fallback font. This is done to avoid any unexpected behavior. It means that if anything goes wrong with Google’s servers, the browser can use its default Serif font. Make this a practice when using the font-family attribute whether you’re using @font-face or not — this practice is called font stacks.
Example Using Google Font API
Here’s an example. Copy and paste the following code block into an HTML document, save it, and then open in your web browser.
I suggest testing your HTML document in various browsers so you can see the cross-browser differences (or lack thereof).
You can experiment with a different type of font, but for this example, I used the Lobster typeface.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>
h1 {
font-family: 'Lobster', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Six Revisions Is Beautiful!</h1>
</body>
</html>
Result:
A screenshot of the above code block through Google Chrome 4.1
The text generated ("Six Revisions Is Beautiful!") is normal HTML text, so you can add more styles in your style element if you like (in our example, we only use one element: h1).
Requesting Multiple Fonts Using Google Font API
Let’s say you need three fonts from Google’s Font Directory. Don’t create multiple requests. Multiple requests increase the number of HTTP requests a web page makes. The fewer HTTP requests you make, the better in terms of web page response times.
Instead of multiple stylesheet link tags, use the following format for the href property of your stylesheet link tag.
The following example URL request will load all the three fonts (Vollkorn, Yanone, and Droid Sans) in one request.
http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans
Now you can use any of these three fonts in your style elements.
Things to Note
Separate font names by a | without spaces between them. Note the use of + in the Droid Sans font. Use the + sign in font names that have spaces. In our case, the font name is Droid Sans, so we used Droid+Sans in the request link.
Tip: Using too many fonts in one request may slow down page response times. So load only the fonts you need. Be conservative: Just because it’s free doesn’t mean you should go crazy with @font-face.
Font Weights and Style for Google Font API Fonts
The web fonts also have font weight/style variations. To use these variations, append a colon (:) to the name of the font followed by the styles and weighs.
In the example below, we request the bold and bold-italic variation of Vollkorn and the italics variation of Inconsolata.
http://fonts.googleapis.com/css?family=Vollkorn:bold,bolditalic|Inconsolata:italic|Droid+Sans
There are also shortcodes for the variations of each font. They are:
- Bold: b
- Italic: i
- Bold-Italic: bi
Here’s an example that uses shortcodes:
http://fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans
Things to Note
Use a colon (:) after the font name without spaces in between them followed by the variation’s name (i.e. bolditalic) or variation name’s shortcode (i.e. bi). If you need multiple font variations for one font, separate them using a comma (,) without spaces in between them.
Google Font API Enables Prettier Web Typography
The web design industry is abuzz with a solution to the age-old problem of typeface limitations on the Web. Are you using @font-face yet? If you aren’t using it yet, why not? Share your thoughts and opinions in the comments.
Related Content
- A Basic Look at Typography in Web Design
- 20 Websites with Beautiful Typography
- Basic CSS3 Techniques That You Should Know
- Related categories: Web Design and CSS
About the Author
Divyang Patel is a Software Developer from Pune, India. A C++ guru at core, he believes the Internet has enormous potential. Check his blog called GoosPoos.com – a web and software technology blog. You can also follow him on Twitter or Facebook.
