Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.
This useful app allows web designers to preview how embeddable fonts will render in their target browsers without having to code a single line of html/css and without having to upload any files via ftp. Unfortunately, however, at present compatibility is limited to Firefox 3.6+, due to the apps reliance upon Firefox’s drag and drop functionality, however the author promises compatibility with other browsers as they add support.
The app also boasts a number of CSS3 features in it’s design including:
- Custom fonts with @font-face
- 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
Give it a try for yourself at: http://labs.thecssninja.com/font_dragr/
You can skip to the end and leave a response.
Hey thanks for the post guys!
Like you said at the moment this only works with Firefox 3.6 as they’re currently pioneering the File API and support for the files attribute on the dataTransfer method in the Drag’n Drop API. That was a mouthful.