Embed fonts easily on the web with Google API

Using various fonts and embedding fonts on a website has always been a rather cumbersome task. There are a variety of ways to do this including the CSS3 property @font-face and Cufon but now there is an even easier way to do this. Google has released their font directory which allows you to embed fonts easily on the web. The Google font directory allows you to browse the fonts available with this method, and for all you designers out there Google has a package with all of the fonts for you to download to use in Photoshop. You can get the the package here to –> embed fonts on the web!

Download the Google fonts package here

With the Google font API you will only need one simple line of CSS in your page and the fonts will function as far back as Internet Explorer 6. For example the retro ‘Lobster’ font can be easily included in your site with the following method.

Firt place this line of code in the header of your document:
<link href=’http://fonts.googleapis.com/css?family=Lobster‘ rel=’stylesheet’ type=’text/css’>

Then all you need to do is call the font family in your CSS like so:
h1 { font-family: ‘Lobster‘, arial, serif; }

Screeshot of Lobster Font using the Google font embed method

That’s it, all of the available fonts are listed for you at the Google font directory full instructions on how to embed fonts on the web can be found here. and you can download the TrueType embeddable font files here to use in your Photoshop Design. Hope you find this useful in your next professional web design project.

6 thoughts on “Embed fonts easily on the web with Google API”

  1. Unfortunately, some of the fonts don’t play well with Font Agent Pro on the Mac. I’ll be trying to use the fonts on a WordPress site later, but I wish they’d fix whatever is wrong with the fonts for us folks who do graphic design.

  2. Originally i had packaged all of the fonts myself, but Google now is hosting the font package on Google Code. The link has been updated to direct to Google.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>