Web Design and Internet Marketing Strategies

Today I came across a blog post by Divyang Patel discussing the use of the Google Font API on your web site.

Since most of my development is done inside of the University world I never paid much attention to using this technique so I decided to implement it on my company web site.

I was amazed at how easy this was to add to your page. The great thing about it is you don’t have to be a web developer guru to implement the code. Simply add a stylesheet link to reference the library.

Notice the reference to Noble in the above line. This tells your web page to load the font family Noble from the list of available fonts from Google. Simply change Noble to your desired font.

To insert fonts with spaces in the names, just add a ‘+’ between text.

[text light="true"]

http://fonts.googleapis.com/css?family=Droid+Sans

[/text]

The next step is to apply it to your styles in your stylesheet. For simplicity we’re going to apply it to the body tag but you can apply it to any css selector.

You can also add it to an inline style.

Placing the font name in quotes tells the browser to render text for the css element with the associated Google font.

To cover all bases (in case of errors) always have a fallback web-safe font following the Google typeface. This way if something goes wrong your content will still display to your users in the browsers default font. I suggest sticking with serif and sans-serif.

To add multiple typefaces, add a pipe ‘|’ between families.
[text light="true"]

http://fonts.googleapis.com/css?family=Noble|Inconsolata|Droid+Sans

[/text]

The other cool feature is Google allows you to add font styles (Be sure to check and make sure the typeface you are using has this available style.), Bold, Bold Italic and Italic.

That’s it in a nutshell. Pretty simple huh? Hopefully in the future there will be even more fonts available to use but right now this is a great start towards closing the print and web typography gaps.

Happy coding!