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 view­ing.

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 tool­bar:

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

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.) Click on a font fam­i­ly, font style, etc. to apply to that selec­tor.

Addi­tion­al Usage

Click the large F to show or hide the over­lay

to show or hide the over­lay 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.)

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 over­lay)

Feedback

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 exten­sion.

Compatibility

@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, sur­pris­ing.

License

Released under the GPL 2 license. Share the love.

Credits

@font-face drag-and-drop code based on font dra­gr

Inspiration