Test New Fonts using HTML 5 and CSS 3

Yesterday, I was reading a post on ycombinator about the New free monospace programming font by Mark Simonson: Anonymous Pro. I decided to check out this new font using a cool HTML 5 application called font dragr.

font dragr is a HTML 5 and CSS 3 web application that demonstrates the awwsomness and hawtness of HTML 5. Once you have downloaded a truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) font to your machine, you just have to drag and drop the font from your desktop to a specified area in this web application. How very cool!

Note: Currently this application works only on Firefox 3.6.

So after downloading Anonymous Pro font, I dragged all the four true type font files from my desktop to the specified area as shown below:


Once all the fonts are dropped in this area, they get added to the list as shown below. Just select a font and see the preview in the section to the right.

Preview of Anonymous Pro Bold Italics


Preview of Anonymous Pro


Applications like font dragr, showcase the power that upcoming web technologies like HTML 5 has in store for us!

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: