Font Dragr: A drag and drop font tester

After playing with the new file API draft spec available in Firefox 3.6 with my drag and drop upload article. I had another idea when I was playing with custom fonts, @font-face, in the browser. What if you could drag an drop a font file (otf, ttf, svg, woff) from your desktop into the browser and have text rendered on the fly using any available valid font.

In conjunction with Mozilla’s official announcement for the Web Open Font Format (WOFF) and continuing the wanky tradition of removing vowels from web app names, I introduce font dragr.

What is it?

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.

See it in action

Encoded files

I went about testing out a few theories on how I could dynamically add a dropped font to be used in the page. I saw this article on embedding custom fonts using a base64 encoded string. In the file API we have the getAsDataURL() method to return a file as a data url for using in a page, I used the same method in my drag drop upload demo to display the images.

Inserting into the stylesheet

The next hurdle was taking that data url and inserting it into the style sheet referenced on the page.

var styleSheet = document.styleSheets[0],
	fontFaceStyle = 
	"@font-face{font-family: CustomFont;src:url("+files[i].getAsDataURL()+");}";
 
styleSheet.insertRule(fontFaceStyle, 0);

In the above code we reference our style sheet using document.styleSheet[0]. We then build our style from the dropped file that we want to insert, notice the files[i].getAsDataURL() is where the magic happens and the current file is converted to a dataURL. We then use the insertRule method to prepend it to the style sheet.

Getting file information and applying the font

We also get the fileSize of the font and the fileName so we can populate the list item that we create on drop. With the file name I also do some crude validation and I also sanitise the file name in case there is any non alpha numeric characters, it will stop the font from being applied to the container if we have invalid characters.

acceptedFileExtensions = /^.*\.(ttf|otf|svg|woff)$/i
 
droppedFileName = droppedFullFileName.replace(/\..+$/,"");
droppedFileName = droppedFileName.replace(/\W+/g, "-");

For the validation I have a regexp of accepted file extensions so it will only accept font types that work in Firefox. I remove the file extension from the fileName and then replace any non alphanumeric characters, \W, with hyphens.

Once we have a semi-friendly name we use that to apply the font family style to the newly created list item and the content container.

displayContainer.style.fontFamily = droppedFileName;

International font friendly

Dragging in an international based font file will cause the text to render in a default sans serif font. To fix that I have made the main content area editable, you can type some text in your own language which should render in your international based font, this hasn’t been thoroughly tested. I would appreciate any feedback on using this demo with international fonts.

Work in progress

I am still very much actively refining and adding more features to this web app. If you have any of your own features/ideas please feel free to suggest/request any improvements or changes. Some I’m working on now.

  • Using localStorage object to store users dropped fonts and save edits to main content area. Main content edits are now stored in localStorage, hit size limit capacity with dropped fonts will look into webDB for font storage.
  • Better indicating to the user that the content can be edited
  • Making the drop area highlight on drag

I built this to fill a need I had, to quickly test custom fonts, and the idea has grown in to something much bigger and better than I thought it would be. I can see this as not only something cool to show off where HTML5 is heading but something genuinely useful.

Post filed under: html5, javascript.

Skip to comment form.

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

  2. Ken Saunders says:

    Truly awesome! I love it!

  3. aarontgrogg says:

    just thought i’d let you know, i’m getting this at the Font Dragr URL:

    Content Encoding Error

    The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.

    * Please contact the website owners to inform them of this problem.

  4. Thanks for the comment Aaron. Are you using FF3.6? Have you tried it in any other browsers? If you clear your offline cache and try it again does that work?

  5. Rockaby says:

    The problem is that tho the fonts dropped on the application work on the test page text, they don’t work on my website. I was hoping for a way to discover what fonts will work on my website and which will not. I go thru dozens of embeddable fonts that don’t work in Firefox or Safari for Windows before I find one that does. How is it the fonts I drop work on the test page but not on my own website neither online nor offline? I run all my fonts thru fontsquirrel processing but that still doesn’t help any.

  6. @Rockaby – If they’re working in my web app but not on your site you’re doing it wrong. Are you feeding the correct mime types for each font format on your server? That would most likely be why it not working on your site but is on mine.

  7. raphaël says:

    Something can be very useful: once the font is uploaded, user can add a tag to it. It can be cool to sort the font people upload, can be applied to images also.

  8. jojo says:

    great app keep up the good work

  9. Kevin says:

    I tested Malayalam, its cooool.

  10. Hi Rian,
    We have taken your fantastic FontDrag, added a few other things into the mix, and created a font testing page that we use while we are in the process of designing new fonts.
    Have a look at it at http://www.impallari.com/testing/
    Hope you like it!

    Cheers,
    Pablo

  11. Ryan Seddon says:

    @Pablo –

    That’s cool glad you got some use out of it. Looks like you’re using some of the realy old code though.

    I’ve put the rebuilt one on github if you’re curious https://github.com/ryanseddon/font-dragr

  12. Thanks! Will have a look at it.

Leave a comment