Sam Rayner

AltFontPrev

Typography on the Web is one of the most constraining features of the medium. Designers who wish to stray away from the safety of Verdana, Georgia, and co. generally have three options:

1. Image Replacement
2. Flash Replacement
3. Taking their chances with CSS

The downsides of image and Flash replacement are well documented. Saving headings or snippets of text as images quickly gets tiresome on sites with a steady stream of new content and, unless used carefully, can cause problems for search engines and screen readers. Replacement techniques such as sIFR solve these problems gracefully but introduce the need for Flash to be installed and JavaScript enabled.

Until @font-face becomes widely accepted by browser developers and the community, declaring anything but web-safe fonts in CSS will remain a risky business. Choosing suitable alternatives for a font that looks great but is unlikely to be installed can be difficult. Style, x-height, character width and weight must all be taken into account to ensure less-fortunate visitors receive as similar an experience as possible. It’s all too easy to focus on the first sans-serif of a font-family, simply chuck in a quick line-up of verdana, arial, sans-serif to follow, and not consider how much wider Verdana is than your preferred font or how much rounder Arial is.

So, time to release something I’ve had in mind for a while…

AltFontPrev is a JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available. Each font used to style elements on the page is listed under its selector and, when clicked, is moved from being a fall-back to being the primary font.

Try it out for yourself: click the button below to preview this page with alternative fonts.

To ‘install’ the bookmarklet in your browser for use on any site, drag this link into your bookmarks toolbar or menu. When you want to use it on a site, just click the bookmark and the pane should appear.

As well as choosing a font from the existing CSS declarations, you can type a custom font to override everything. Hopefully this will help you choose alternative fonts when perfecting your site’s typography.

You’ll see an indicator when you hover over a font in the list. It will take the form of a capital ‘O’ if the font in question is installed on your system. If AltFontPrev picks up a font from the CSS that is not installed, it will be flagged up. In Safari, that’s literally; a flag symbol will appear in place of the O.

Unfortunately, Firefox and Opera don’t support Wingdings so will offer up a squashed, Impact-styled O instead. It should still be discernible from the standard indicator but, I admit, it’s not ideal. If you’re using Firefox and would prefer missing fonts to be flagged, there is a rather hacky way to add Wingdings support.

AltFontPrev is the first project I’ve taken on in my efforts to teach myself JavaScript. The gurus amongst you might cringe a little at my code so, if you have any advice or requests concerning the features of the script, please leave a comment. I’m eager to hear if I’ve approached anything in a particularly nooby way.

The code for the bookmark simply calls a script hosted on this site. That way, I can update AltFontPrev without you having to change anything your end. If traffic gets too much for my hosting, which I doubt it will, I can always move the script to a repository and open-source it. For now though, I’d prefer if any changes went through me. This is as much a learning experience for me as it is a tool for the community.

The only thing on the to-do list for the next version is to add shorthand support for Safari. At the moment, WebKit’s handling of style.fontFamily does not include shorthand font declarations. A fix could get very messy though, so we’ll see.

The script doesn’t work on every site but its success rate is pretty high. It doesn’t load on some of the big-guns like eBay and Flickr for example. The look of the pane is also occasionally affected by the CSS of a page. If you come across a site that seriously breaks it, feel free to give me a heads up and I’ll get on it.

My hope is that AltFontPrev will give web designers the confidence to experiment with less common fonts without worrying about some of their audience getting a Times-riddled raw deal. Even if just 1% of your visitors get to appreciate your use of Archer or Gotham then I’d say it’s worth the effort compensating for it.

• Posted: July 20, 2008
• In: JavaScript
• 9 Comments

Your Thoughts?

Name *

Email * (Private)

Website

* Required

Comments

Options

Remember info Notify of follow-ups

Some basic HTML allowed. Please keep all comments constructive, polite and on-topic. Any spam or offensive comments will be deleted.

Archives