Back in the day, developers and designers used to use images to create titles and menus for websites. It was a standard part of the cycle, crack open Photoshop or Illustrator, play around with as many fonts as you have available on your machine, add a drop shadow and save for web after compressing the life out of it. There were some upsides to this approach, the results were fairly predictable, there was no browser issues and you could make things look pretty good with no more than a basic knowledge of Adobe’s design packages.
As the web evolved however the cons started to outweigh the pros, text as images was incredibly restrictive, it couldn’t be changed in a CMS and it wasn’t scaleable in terms of language. There was also ramifications on page load time and acessibility. A simple change request to a menu item or title would involve a lengthy and time consuming procedure that only a developer could perform, and all this before we get to the biggie – Google can’t spider images as text.
Time was up for image text.
So we spent a few years working with web safe fonts, I was more than happy with that approach as I’d always favoured content over design. A few people experimented with licencing and loading font sets onto their servers but that never really took off, it just wasn’t worth the hassle.
As usual Google have an answer to our woes, in this case in the form yet another API. Enter Google Fonts. No programming skills are needed to add fonts to any site or application, there’s even a plugin for WordPress and a module for Drupal available for the non technical.
It’s a simple procedure. Go the web Google Fonts site and choose what you want to use from a huge selection of type faces. There’s a review facility so that you can add your own content and also a page load scale that will give some idea as to the impact on page load. On the subject of page load if you’re using the font for limited content of a known value, a title for example, you can choose to download only the characters you need. Nice.
What you’ll end up with is something like this:
<link href="http://fonts.googleapis.com/css?family=Fruktur" rel="stylesheet" type="text/css" />
Or this if you’re optimising to use only the characters you need:
<link href="http://fonts.googleapis.com/css?family=Fruktur&text=Alan%20Coleman" rel="stylesheet" type="text/css" />
Or this if you want to add some effects:
<link href="http://fonts.googleapis.com/css?family=Fruktur&text=Alan%20Coleman&effect=shadow-multiple" rel="stylesheet" type="text/css" />
font-family: 'Fruktur', cursive;