CSS3 Resource: Preview Custom Web Fonts with Font Dragr

No comments

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

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.


fontdragr
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/

No comments :

Post a Comment