Font­Friend is a book­marklet for typo­graph­i­cal­ly obsessed web design­ers. It enables rapid check­ing of fonts and font styles direct­ly in the brows­er with­out edit­ing code and refresh­ing pages, mak­ing it the ide­al 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 brows­er (Fire­fox 3.6+, Chrome 7+), in any doc­u­ment you’re cur­rent­ly viewing.

Ver­sion 2.5 and 3.0 intro­duced some new fea­tures that aren’t doc­u­ment­ed 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 brows­er toolbar:


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­i­ly, font style, etc. to apply to that selector.

Addi­tion­al Usage

  • Click the large  F to show or hide the overlay
  • Click the faint S in the low­er right cor­ner to reset all styles (Cau­tion: this is an inten­sive oper­a­tion that could take down your brows­er on a very com­plex site. You’ve been warned.)
  • Type in the “your font fam­i­ly” box to use a font-fam­i­ly oth­er than the includ­ed 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)


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.


@font-face drag-and-drop is cur­rent­ly only com­pat­i­ble with Fire­fox 3.6. Oth­er­wise test­ed with Fire­fox 3+ & Safari 3+. Any com­pat­i­bil­i­ty with IE is most­ly acci­den­tal and, frankly, surprising.


Released under the GPL 2 license. Share the love.