
altfontprev
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.
Project Information
- License: GNU GPL v3
- 31 stars
- svn-based source control
Labels:
bookmarklet
javascript
typography
fonts
css
webdesign