FontFriend

Font­Friend is a book­marklet for typo­graph­i­cally obsessed web design­ers. It enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages, mak­ing it the ideal com­pan­ion for cre­at­ing CSS font stacks. 2.0’s killer fea­ture is instant drag-and-drop font pre­view­ing right in the browser (Fire­fox 3.6+, Chrome 7+), in any doc­u­ment you’re cur­rently viewing.

Ver­sion 2.5 and 3.0 intro­duced some new fea­tures that aren’t doc­u­mented here yet. Click the ver­sion num­bers to see the release announce­ments for each.

How To Begin

First, drag the fol­low­ing link to your browser toolbar:

Font­Friend

Then, view the fol­low­ing screen­cast, as any infor­ma­tion new to v2.0 is in it. (Skip to 1:05 to see 2.0-specific info)

How To Use

  1. A CSS selec­tor is cho­sen from the Selec­tor col­umn—body by default. (You may also roll your own using jQuery’s sup­port for advanced CSS selec­tors.)
  2. Click on a font fam­ily, font style, etc. to apply to that selector.

Addi­tional Usage

  • Click the large  F to show or hide the overlay
  • Click the faint S in the lower right cor­ner to reset all styles (Cau­tion: this is an inten­sive oper­a­tion that could take down your browser on a very com­plex site. You’ve been warned.)
  • Type in the “your font fam­ily” box to use a font-family other than the included defaults. (Changes hap­pen as you type.)
  • Click the arrows to move the over­lay around the screen (so you can see your fonts with­out hav­ing to close the overlay)

Feed­back

Please report any issues and/or fea­ture requests through my con­tact form, on Twit­ter, or on the Google Code project page.

NOTE: If you are see­ing Font­Friend load on every page and are annoyed by this, please unin­stall the Edit Font Chrome extension.

Com­pat­i­bil­ity

@font-face drag-and-drop is cur­rently only com­pat­i­ble with Fire­fox 3.6. Oth­er­wise tested with Fire­fox 3+ & Safari 3+. Any com­pat­i­bil­ity with IE is mostly acci­den­tal and, frankly, surprising.

License

Released under the GPL 2 license. Share the love.

Cred­its

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

Inspi­ra­tion