Google is looking to help all of us web and graphic designers out there who have been trying to break free of the CSS font-family limitations. How are they doing this? Today Google released the Google Font Directory and Google Font API in attempts to bring a selectable and dynamic font solution to the web. I'm expecting the directory in the future this solution will grow to become the web's leading robust and scalable font library and API.
The good things about this web font solution is that it is very easy to implement and the text is completely selectable (for copy-and-paste purposes). The downsides (both will eventually become irrelevant) are that not every browser will support it... mostly the old school ones that no one should care about anymore, and that it in it's current state the Google Font Directory is limited to a about 20+ fonts (of which you'd probably use about 10). As the web continues to evolve both of these 'downsides' will no longer be relevant.
Google Web Fonts
Using the Google Font API and Directory
Google's Font API
Google's font API is a part of Google Labs and is an easy to use application programmable interface (API) that allows you to select a font from Google's font directory and use it on any website of your choosing... for free! Applying a font from Google's Font Directory is a breeze, simply add a stylesheet link to your site's head and then use the font you selected from the directory in a CSS style. Bingo, bango, bongo.
Usage and Implementation
Here's a Google Font usage example:
First add our stylesheet to the head of your website.
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
</head>
Next, let's apply the font we chose from the Google Font Directory it to a class on our site! We can do this in our master CSS stylesheet or in your head also (I'd recommend keeping your styles in the mastersheet).
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
.foo {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
Now with this implemented properly using the quick example shown above you will see some sweet Google font below this paragraph that's selectable and easy to implement.
Check me out! This text is selectable and super easy to implement. Thanks Google!
Still Confused? One More Time
Often times, things explained the first time don't make sense. If you're still confused here's the jist
Step 1: Add a stylesheet link requesting the fonts from Google to your website (preferably in the head).
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
Step 2: Style an element with the font you just requested in step 1. By element I mean any CSS class or ID.
CSS selector {
font-family: 'Font Name', serif;
}
Step 3: There is no step 3! Just repeat step 2 by styling elements you have already on your website.
Google's Font Directory
Google's font directory, though still in beta and limited to about 20+ fonts, is going to be widely adopted by web designers in the near future. Why? Because Google has made a very intuitive, free, and simple to implement solution. The fonts are free to use on any commercial and non-commercial web projects.
Comparable Web Font Solutions
Google isn't the first to come out with an entirely open source font library. Typekit and Fontdeck are doing the same thing: providing their users with a library of fonts that can be embedded on their websites. The difference is these companies don't have the muscle of Google, are many times more difficult to implement, and may cost money (not open source).Google Font Solution Final Thoughts
Related posts:
- Modern Web Font Options for Web Designers Google's new Font API, Cufon, @font-face, sIFR, FLIR...?! It's 2010 and the Internet has long since evolved to become an integral part of modern society. As web designers, our web fonts used to be limited to a small number of 'safe' font-families. Today there are a number of options that allow web developers to break [...]...
- Forget about using @font-face thanks to Google Web designers beware that if you're eager to use @font-face in the near future you can forget it! With Google now entering the web-font market the guys over at font-face.com decided it was a lost cause to continue on their noble quest. Personally, I would be rather upset if I had invested 100s of hour [...]...
- WordPress Lavalamp Navigation Tutorial Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's [...]...
- Modern CSS Typography and Font Styling Examples CSS& Design Check out my new article Modern Web Forn Options for Web Designers for my latest rundown of web font solutions Attractive CSS typography and styled fonts can add a lot to a user's experience on your website. Think of your website's typography as the foundation upon which your design is built. Typically, users [...]...
- Top-10 DMOZ Competitors (Open Directory Project) Are you still waiting around to get listed on DMOZ? It takes forever. Maybe it's worth taking a look at the closest DMOZ competitors. The following is an analysis of the closest competitors to the Open Direcoty Project. Thanks for checking out my Top-10 DMOZ Competitors list! Please leave a comment or suggestions. What is [...]...
-
http://www.project-reason.org/forum/member/151732 Jesus Blocker
