FontFriend

FontFriend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks. 2.0’s killer feature is instant drag-and-drop font previewing right in the browser (Firefox 3.6+, Chrome 7+), in any document you’re currently viewing.

Version 2.5 and 3.0 introduced some new features that aren’t documented here yet. Click the version numbers to see the release announcements for each.

How To Begin

First, drag the following link to your browser toolbar:

FontFriend

Then, view the following screencast, as any information new to v2.0 is in it. (Skip to 1:05 to see 2.0-specific info)

How To Use

  1. A CSS selector is chosen from the Selector column—body by default. (You may also roll your own using jQuery’s support for advanced CSS selectors.)
  2. Click on a font family, font style, etc. to apply to that selector.

Additional Usage

  • Click the large  F to show or hide the overlay
  • Click the faint S in the lower right corner to reset all styles (Caution: this is an intensive operation that could take down your browser on a very complex site. You’ve been warned.)
  • Type in the “your font family” box to use a font-family other than the included defaults. (Changes happen as you type.)
  • Click the arrows to move the overlay around the screen (so you can see your fonts without having to close the overlay)

Feedback

Please report any issues and/or feature requests through my contact form, on Twitter, or on the Google Code project page.

NOTE: If you are seeing FontFriend load on every page and are annoyed by this, please uninstall the Edit Font Chrome extension.

Compatibility

@font-face drag-and-drop is currently only compatible with Firefox 3.6. Otherwise tested with Firefox 3+ & Safari 3+. Any compatibility with IE is mostly accidental and, frankly, surprising.

License

Released under the GPL 2 license. Share the love.

Credits

  • @font-face drag-and-drop code based on font dragr

Inspiration