font_dragr: a drag and drop preview tool for fonts

This demo is from our good friend Ryan Seddon who came up with a demo that seems deeply appropriate for this week, given our focus on the future of fonts on the web.

If you’ve ever been editing a page and wanted to know what a particular font looked like without having to upload files to a web server and update CSS (so tedious, that!) then this demo is for you.

He’s come up with a demo that shows what’s possible when you’ve got downloadable fonts, drag and drop and editable content. (If you want to know more about drag and drop we suggest you read his excellent overview of using drag and drop to do file uploading.)

From Ryan’s description:

Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after the initial visit. It allows you, in Firefox 3.6+, to drag and drop font files from your file system into the drop area. The browser will then create a data URL encoded copy to use in the page and render the content in the dropped font.

You can either read the full description, which contains a lot of useful technical information about how the demo works, or you can view the demo below. Either way, it’s nice to see the excellent HTML5 support in Firefox 3.6 coming together with everything else we’ve added to bring a lot of new capabilities to web developers and users.

Thanks, Ryan!


  1. skierpage

    That’s extraordinary. It works dragging from /usr/share/fonts shown in the Dolphin file browser into Firefox nightly. It doesn’t work dragging fonts from the list in Kubuntu’s System Settings > Font Installer, even though a promising-looking font icon with + sign appears as you drag. Is there an HTML 5 JavaScript dragn’n’drop debugger?

    October 21st, 2009 at 17:48

  2. Ryan

    You could add a break point using firebug and see what the variable droppedFontData is producing.

    What happens once you have dropped the font?

    October 21st, 2009 at 19:03

  3. Dresandreal Sprinklehorn

    Where has this thing been all my Web life? Does this come with a case of beer? It seems to have everything else.

    October 24th, 2009 at 21:18

  4. Ryan

    Unfortunately the beer specification is yet to make it into Firefox nightly just yet :D In the mean time you can always shout me a beer.

    October 26th, 2009 at 01:52

  5. shmerl

    Very nice. It works perfectly when dragging font files from Nautilus to the browser on OpenSolaris.

    October 29th, 2009 at 07:49

  6. […] now support file-based Drag and Drop so you can Drag and Drop files from your desktop in the browser. Mixed with the File API (mentioned below) this can make for a very powerful set of features for […]

    October 30th, 2009 at 17:46

  7. sky80

    Great demo …hopefully this also works one day in IE ;)

    November 4th, 2009 at 13:30

  8. jor

    It seems too good to be true.
    Thanks very much, in the name of every web developer out there.

    November 4th, 2009 at 14:28

  9. Simon Brüchner

    I created a JavaScript MD5 check tool similar to font-dragr:

    November 9th, 2009 at 20:48

Comments are closed for this article.