-
200904 Nov
Posted in CSS3 Resources
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
- 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
Give it a try for yourself at: http://labs.thecssninja.com/font_dragr/
You can skip to the end and leave a response.
-
Comments
-
01.
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.
Anyway if you’re interested in reading more about it I also did a blog post going into a bit more detail on the technical side of things http://www.thecssninja.com/javascript/font-dragr
-
02.
Boris says:Comment » November 5th, 2009 at 10:56 am
Nice proof of concept. If you care you might want to check the rendering issues of white banner in Chrome and the side bar in Opera.
-
03.
This feature in Firefox is big! :) I wish development and implementation in other browsers would be faster. Imagine how much time you can save designing websites.
-
04.
Fundamental CSS3 Resources for Designers | Son Of Byte says:Comment » December 11th, 2009 at 11:35 am
[…] CSS3 Resource: Preview Custom Web Fonts with Font Dragr […]
-
05.
Recursos fundamentales sobre CSS3 para diseñadores | Cosas sencillas says:Comment » December 25th, 2009 at 1:38 pm
[…] CSS3 Resource: Preview Custom Web Fonts with Font Dragr […]
-
06.
stacey says:Comment » December 28th, 2009 at 11:14 am
I tried dragging the font, but got a window, asking if I wanted to open or download the font, when I clicked in the font dragger, the font I dragged wasn’t there.
-
07.
-
08.
[…] CSS3 Resource: Preview Custom Web Fonts with Font Dragr […]
-
09.
Chris says:Comment » January 10th, 2010 at 2:09 pm
How did stacey fix the issue with the browser asking what to do with the dragged font file? Set Firefox to “open” the font, or something else?
-
10.
[…] CSS3 Resource: Preview Custom Web Fonts with Font Dragr […]
-
11.
-
12.
Wonderfull, i want remake design my website with CSS3
-
13.
Hi, I was looking for this content and finally i got it. Thank you for this. The content is very useful for me.
-
14.
-
01.
