Monday, October 26th, 2009

Be a CSS Ninja with your Font Dragr

Category: Firefox, Showcase, Typography

The CSS Ninja has created a Font Dragr drag and drop font tester:

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.

Used in the app:

  • HTML5
    • Offline access applicationCache
    • Drag and drop API
    • File API
    • contenteditable attribute set to true so the text can be edited.
  • CSS3
    • Custom fonts with @font-face
    • Gradients
    • Rounded corners using border-radius
    • Drop shadows with text-shadow & box-shadow
    • Attribute and pseudo selectors
    • Multiple border colours
    • Box model adjust using box-sizing

See it in action:

Posted by Dion Almaer at 6:34 am

1.7 rating from 53 votes


Comments feed TrackBack URI

Editors, when will you fix the content fitting the article width?

Comment by MartijnHoutman — October 26, 2009

MartijnHoutman, they’ve never even acknowledged it. They rarely even respond to comments directed at them, and I suspect they probably just don’t read them. My suggestion is to use a custom stylesheet for This is the one I use, which preserves the design appearance but extends the main column to the right of the full content area:

#sidebar {
display: none;

#maincontent {
width: 700px;
padding-left: 27px;
padding-right: 20px;

#maincontent #commentlist dd {
margin-bottom: -5px;
padding-bottom: 1.3em;

.igBar {
width: 644px;
.syntax_hilite {
width: 633px;

#commentscontainer, p.commentbar {
background-image: none !important;

Comment by eyelidlessness — October 26, 2009

Theres one more feature which I only added a few days ago. The main content area will save any edits you do using localStorage.

Comment by Ahrjay — October 26, 2009

eyelidlessness, I like your hacks.

Comment by arphen — October 27, 2009

I created a similar project at a local JavaScript MD5 check tool.

Comment by powtac — November 10, 2009

Leave a comment

You must be logged in to post a comment.