About

AltFontPrev is a JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen. 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.

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.

Installation

Create a bookmark with the following as its address (line-wraps marked ↵):

javascript:function%20addAFP()%20{var%20scriptElm%20=%20document.createElement('script'); ↵
scriptElm.setAttribute('id','afp-js');scriptElm.setAttribute('type','text/javascript'); ↵
scriptElm.setAttribute('src','http://altfontprev.googlecode.com/svn/tags/latest/afp.js'); ↵
document.getElementsByTagName('head')[0].appendChild(scriptElm);}addAFP();

To preview the site you're viewing with alternative fonts, simply click the bookmark and AltFontPrev will appear.

Usage

Select an element from the CSS selectors drop-down menu then click an existing font or type a custom one and hit enter to update the page. For more information on the bookmarklet click the info button in the top right. To close the pane, click the cross in the top left.

For more information, read the blog post.