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:

image

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

image

Preview of Anonymous Pro

image

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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: