As more of our tools begin to utilize the web as their platform, it’s important to try to provide the same experience for all users across the various browsers and operating systems. Up until recently, there were only a specific set of fonts that would display about the same regardless of the platform.
Google Font API is helping to mitigate that problem. Although it’s been out for a little while, it’s still worth taking a look at how to use it.
Essentially, Google Font API is a way for you to import a variety of fonts into your web-based projects that you can specify via CSS and that will render the same in [most] browsers.
Pick Your Font
Before coding, go ahead and chose the font that you want to use. Google provides a page that displays all of the available fonts, how it looks at different styles and character sets, and the code necessary to include in your markup.
I’m going with Droid Sans.
Link To It!
If you’ve not already got an HTML file setup, go ahead and get it setup. It look should something like this:
[cc lang=”html”]
[/cc]
After that, add the line of code from the Google Font Directory in the head section of your markup. Since I went with Droid Sans, my link tag looks like this:
[cc lang=”html”] [/cc]
Wear It With Style
Finally, apply the style to the various elements in your document. I only want to style paragraph tags so I’m going to add the following CSS to my page:
[cc lang=”css”]
[/cc]
Ultimately, my results look like this:
Easy enough. Think you’ll be using this in any of your work?
Ryan Rushing says
I’ve used Droid Serif instead of Georgia on some recent projects, and I really dig it.
I love the simplicity of installing the fonts. Easier than Typekit (albeit not near as many choices), and less hassle than @font-face. Good solution for web typography so far, but Google needs to add more fonts.
Tom says
I’m totally with you. Love the simplicity, but the number of choices leaves much to be desired.
Knowing Google, they’ll eventually add more, but I think it’d be nice if they open sourced it a bit and took contributions from the community.