image loading

Make Your Website Pop! Get Easy-to-Use, Cool & Compatible Web Fonts

Web designers’ & web masters’ have to decide what font to use on a website. Big decision? Actually, it is. Search engine optimization dictates that the words, in the least, won’t be hidden in images; however, most of use have realized that the selection of fonts that are cross-system compatible (i.e. they look the same across browsers, computers, &/or devices) are “slim-pickings.” So, we have often resorted to using boring fonts to get the job done. We put so much work into the design of our website. Wouldn’t it be great to have text headings that ‘pop’ & work with our branding/theme of one of our most golden marketing materials – the website?

Fear No More! Compatible Fonts to the Rescue

If you have this fear & you’ve not tried a compatible web font – what are you waiting for!? There are several sources out there, but today I’m talking about the oh-so-easy-to-use Google Web Fonts.

Google’s Got It! Quick, Easy, Exciting Google Web Fonts

In about 3 easy steps you can be using a new exciting font on your website. You will need access to your web files, and a basic understanding of CSS & HTML to fully implement this. For a web designer, this should be a breeze. So, if you have a webmaster, just task them with this upgrade.

Curious yet? Go to Google Web Fonts to browse available fonts, save them to your favorite, & get the process to start using them.

Google Web Fonts Screen Shot

You can go down the list of fonts that you like & save them by clicking “Add to Collection.” Then, when you’re ready to start using the fonts you’ve selected, hit the “Use” button in the far bottom-right portion of the screen. It will take you to the next screen, which shows the code you need & directs your next steps. Basically, all you need to do are these 2 things:

  • 1. Add the code provided by Google to the header. It will looks something like this:
    link href=’http://fonts.googleapis.com/css?family=Your Font One|Your Font Two|Your Font Three’ rel=’stylesheet’ type=’text/css’
  • 2. Add the styles to the appropriate location in your CSS stylesheet. If you need to brush up on CSS Styles, I suggest checking out W3 Schools for some great CSS tutorials.

Caution! Some Rules of the Game

Don’t forget to be careful. There is a strong urge to flood the page with gaudy fonts, but don’t go overboard. Just like any marketing piece, print or web, too many fonts will take away from the item. Be selective. Look at the other fonts you are already using on the page & think about your branding. That medieval-style font-type is fierce, but does is really fit with your Pete’s Pet Shop website? That halloween chiller font is expressive, but that’s probably not the expression to communicate on your Claude’s Childrens Portraits website. Catch my drift? So, in summary, keep away from too many variations on one page & inappropriate font selections. Otherwise, this is going to add an outstanding dimension to your website & an enhanced user-experience. Have a font-astic day!