Using Google Font API

June 4, 2010 by  
Filed under Code Snippets, Google, Links and Resources

One thing I learned at Google I/O that I thought was fun and exciting was their new Google Font API. What does this mean? It means I don’t have to add text to images using Photoshop anymore. I can just add it directly to the HTML code as plain text and it’ll look beautiful on the page.

This will (1) speed up page loads because text loads faster than images and (2) make the page more accessible (screen readers won’t need to piece together alt tags of images; instead, it’ll just read the text directly off the page. (3) The more text you have on a page, the more SEO-friendly it is.

Lucky for us, adding Google fonts to our webpage is quite easy. All you need is to know a bit of CSS and HTML, and how to copy and paste!

Step 1: Select Font

Go to the Google font directory and choose a font you would like to use. In the sample below, I picked the “Lobster” font.

Step 2: Get the Code

If you like the font, tab over to “Get the Code.” From there, you will get a sample code like this:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></link>

To include the code into your page, simply copy and paste this code into the header of your HTML page.

If you prefer to include the font it into your CSS stylesheet instead of your HTML header, you can use a code like this instead:

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

Step 3: Add some style!

Now that you have your font embedded onto your page, it’s time to give it some style. Create a CSS class and add in your font.

In this sample, I created a class called “prettyFont” and made it use the “Lobster” font to display, in huge red font. The alternative “arial and serif” font were added as a backup in case Google Font API was down; these web-safe fonts will display instead of Lobster in that case.

.prettyFont { font-family: 'Lobster', arial, serif; font-size: 3em; color:red; }

That’s pretty much it! Adding Google Fonts to your page is as simple as 1-2-3! You can also go even more wild and add shadows, shading, and anything else you can do with HTML + CSS.

For more information, see the Google Font API documentation. For more sample codes, check out Getting Started with Google Font API. And if you want to dive in deeper and add in italic, bold, and bold italic fonts, see their further reading section.

Related Products:

Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web PagesHead First HTML and CSS: A Learner's Guide to Creating Standards-Based Web PagesTired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML and CSS, and really learne... Read More >
Learn CSS in One Day and Learn It Well (Includes HTML5): CSS for Beginners with Hands-on Project. The only book you need to start coding in CSS ... Coding Fast with Hands-On Project) (Volume 2)Learn CSS in One Day and Learn It Well (Includes HTML5): CSS for Beginners with Hands-on Project. The only book you need to start coding in CSS ... Coding Fast with Hands-On Project) (Volume 2)Master HTML and CSS with Interactive Exercises and a unique Hands-On Project

Have you always wanted to learn HTML and CSS but are afraid i... Read More >

Thinking in HTMLThinking in HTML

You will gain an intermediate knowledge of HTML after reading this book. Instead of wandering through loads of theory, we will understand HTML prac... Read More >

Related Posts Plugin for WordPress, Blogger...
  • Romy

    Thanks, you RULE!