Mozilla

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!

Posted by on at

9 comments

Comments are now closed.

  1. skierpage wrote on October 21st, 2009 at 5:48 pm:

    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?

  2. Ryan wrote on October 21st, 2009 at 7:03 pm:

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

    What happens once you have dropped the font?

  3. Dresandreal Sprinklehorn wrote on October 24th, 2009 at 9:18 pm:

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

  4. Ryan wrote on October 26th, 2009 at 1:52 am:

    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.

  5. shmerl wrote on October 29th, 2009 at 7:49 am:

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

  6. Pingback from Firefox 3.6 Beta 1 now available – what’s new for web developers at hacks.mozilla.org on October 30th, 2009 at 5:46 pm:

    [...] 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 [...]

  7. sky80 wrote on November 4th, 2009 at 1:30 pm:

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

  8. jor wrote on November 4th, 2009 at 2:28 pm:

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

  9. Simon Brüchner wrote on November 9th, 2009 at 8:48 pm:

    I created a JavaScript MD5 check tool similar to font-dragr: http://www.bruechner.de/md5file/js/

Comments are closed for this article.