CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"><head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com:80/articles/great-font-resources/","20100809090813","https://web.archive.org/","web","/_static/", "1281344893"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <link rel="stylesheet" type="text/css" href="https://web.archive.org/web/20100809090813cs_/http://bavotasan.com/wp-content/w3tc/min/164038/default.include.1673213508.css" media="all"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="googlebot" content="index,archive,follow,noodp"/><meta name="robots" content="all,index,follow"/><meta name="msnbot" content="all,index,follow"/><meta name="description" content="Ever since I wrote Embedding Fonts in your Web Site with CSS and @font-face many people have been emailing me with questions about adding new fonts to thei..."/><meta name="keywords" content="api,APIs,custom fonts,david chester,Desktop,desktop publishing,development,download,equivalents,face kits,flash,font resources,Fonts,google,Loader,new fonts,others resources,range,Replacement,Squirrel,subscription costs,text elements,Tool,type,type foundries,typeface,TypeKit,using flash,way,WebFont,"/><title>Great Font Resources for Web Development | bavotasan.com</title><link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/feed/"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/comments/feed/"/><link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Great Font Resources for Web Development Comments Feed" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/great-font-resources/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100809090813js_/http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://bavotasan.com/xmlrpc.php?rsd"/><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://bavotasan.com/wp-includes/wlwmanifest.xml"/><link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/><link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/><link rel="prev" title="Blind Toggle for jQuery" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/blindtoggle-for-jquery/"/><link rel="next" title="Using Ajax with WordPress" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/using-ajax-with-wordpress/"/><link rel="canonical" href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/great-font-resources/"/><link rel="shortlink" href="https://web.archive.org/web/20100809090813/http://wp.me/pmjlM-EB"/> <script type="text/javascript" src="https://web.archive.org/web/20100809090813js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/><meta property="fb:admins" content="586505548"/><meta property="og:site_name" content="bavotasan.com"/><meta property="og:title" content="Great Font Resources for Web Development"/><meta property="og:description" content="Ever since I wrote Embedding Fonts in your Web Site with CSS and @font-face many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with The New Google Font API but there are also a few others resources available. Here is a list of [...]"/><meta property="og:type" content="article"/><meta property="og:image" content="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/fonts.jpg"/></head><body class="single single-post postid-2517"><div id="bodywrap"> <script type="text/javascript">(function(){var bsa=document.createElement('script');bsa.type='text/javascript';bsa.async=true;bsa.src='//web.archive.org/web/20100809090813/http://s3.buysellads.com/ac/bsa.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);})();</script> <div id="header"><div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100809090813/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li><li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100809090813/http://support.bavotasan.com/">Support Forum</a></li><li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100809090813/http://themes.bavotasan.com/affiliates">Affiliates</a></li><li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/about/">About</a></li><li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/services/">Services</a></li><li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/contact/">Contact</a></li></ul></div><div id="title"> <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a></div><div id="follow"> <span></span> <a href="https://web.archive.org/web/20100809090813/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/feed/" class="rss"></a></div><div id="navigation" class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-2264"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/"><span></span>Home</a></li><li id="menu-item-2266" class="current-menu-item"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/category/articles/"><span></span>Articles</a></li><li id="menu-item-2265"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li><li id="menu-item-2267"><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li></ul></div></div><div id="mainwrapper"><div id="leftcontent"><div class="posttop"><div class="thedate"><div class="month">Jul</div><div class="day">27</div><div class="year">2010</div></div><h1>Great Font Resources for Web Development</h1> <br class="clear"/><p>Ever since I wrote <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/embedding-fonts-web-site-css-font-face/">Embedding Fonts in your Web Site with CSS and @font-face</a> many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/google-font-api/">The New Google Font API</a> but there are also a few others resources available. Here is a list of places to find fonts and tools you can use to include them in your Web site.</p><h3>Font Squirrel</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/fontsquirrel.jpg" alt="Font Squirrel" title="fontsquirrel" width="550" height="160" class="alignleft size-full wp-image-2572"/><br/> Font Squirrel has an amazing library of free commercial-use fonts. All of the @font-face kits that are available in my <a href="https://web.archive.org/web/20100809090813/http://themes.bavotasan.com/category/premium-themes/">Premium themes</a> come from Font Squirrel. You can download fonts to use in desktop publishing or you can grab some @font-face kits to use on your Web site. There is even a handy, simple to use tool for converting standard fonts into @font-face kits for embedding on your Web site.<br/> <a href="https://web.archive.org/web/20100809090813/http://www.fontsquirrel.com/">http://www.fontsquirrel.com/</a></p><h3>Google Font API</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/googlefont.jpg" alt="Google Font API" title="googlefont" width="550" height="160" class="alignleft size-full wp-image-2564"/><br/> I wrote about this one already so just check out <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/google-font-api/">that article</a>.</p><h3>TypeKit</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/typekit.jpg" alt="TypeKit" title="typekit" width="550" height="160" class="alignleft size-full wp-image-2567"/><br/> TypeKit is a subscription-based service that allows you to link to fonts from many different type foundries. Subscription costs range from free to $99.99 per year. A free account allows for 25,000 pageviews a month and a limit of 2 fonts throughout you site. It is a great way to test out the service to see if it is right for you.<br/> <a href="https://web.archive.org/web/20100809090813/https://typekit.com/">https://typekit.com/</a></p><h3>WebFont Loader</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/webfont.jpg" alt="WebFont Loader" title="webfont" width="550" height="160" class="alignleft size-full wp-image-2565"/><br/> This one is very similar to the Google Font API but it offers a wider range of resources of available fonts. You can use Google Fonts, TypeKit, Ascender or custom fonts.<br/> <a href="https://web.archive.org/web/20100809090813/http://code.google.com/apis/webfonts/docs/webfont_loader.html">http://code.google.com/apis/webfonts/docs/webfont_loader.html</a></p><h3>sIFR</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/sifr.jpg" alt="sIFR" title="sifr" width="550" height="160" class="alignleft size-full wp-image-2575"/><br/> sIFR (Scalable Inman Flash Replacement) is an open source piece of JavaScript that allows you to replace text elements on your Web site with Flash embedded equivalents. It is a bit more complicated to implement but there are many sites that use it and the results are quite nice.<br/> <a href="https://web.archive.org/web/20100809090813/http://wiki.novemberborn.net/sifr3/">http://wiki.novemberborn.net/sifr3/</a></p><h3>typeface.js</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/typeface.jpg" alt="typeface.js" title="typeface" width="550" height="160" class="alignleft size-full wp-image-2576"/><br/> typeface.js was developed by David Chester as an alternative to using Flash to embed fonts on your site. Using typeface.js is pretty straightforward, since all it takes is the core JavaScript file and then a font. You can even convert your own fonts.<br/> <a href="https://web.archive.org/web/20100809090813/http://typeface.neocracy.org/">http://typeface.neocracy.org/</a></p><h3>FLIR</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/flir.jpg" alt="FLIR" title="flir" width="550" height="160" class="alignleft size-full wp-image-2577"/><br/> FLIR (FaceLift Image Replacement) is another alternative to sIFR. It was created by Cory Mawhorter and uses JavaScript and PHP to dynamically create images of the text elements that you wish to use specific fonts on. Implementing it requires only a few lines of code and you are up and running.<br/> <a href="https://web.archive.org/web/20100809090813/http://facelift.mawhorter.net/">http://facelift.mawhorter.net/</a></p><h3>Cuf贸n</h3><p><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/uploads/2010/07/cufon.jpg" alt="Cuf贸n" title="cufon" width="550" height="160" class="alignleft size-full wp-image-2578"/><br/> Cuf贸n works with a rendering engine built in JavaScript and a font generator that uses <a href="https://web.archive.org/web/20100809090813/http://fontforge.sourceforge.net/">FontForge</a> to convert fonts to a proprietary format.<br/> <a href="https://web.archive.org/web/20100809090813/http://wiki.github.com/sorccu/cufon/">http://wiki.github.com/sorccu/cufon/</a></p><div class="buttonbox"></div></div><div class="post"><div class="socialleft">If you liked reading this, please share it.</div><ul class="addtoany_list"><li><a href="https://web.archive.org/web/20100809090813/http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&linkname=Great%20Font%20Resources%20for%20Web%20Development" title="Twitter" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a></li><li><a href="https://web.archive.org/web/20100809090813/http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&linkname=Great%20Font%20Resources%20for%20Web%20Development" title="Facebook" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a></li><li><a href="https://web.archive.org/web/20100809090813/http://www.addtoany.com/add_to/digg?linkurl=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&linkname=Great%20Font%20Resources%20for%20Web%20Development" title="Digg" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/digg.png" width="16" height="16" alt="Digg"/></a></li><li><a href="https://web.archive.org/web/20100809090813/http://www.addtoany.com/add_to/delicious?linkurl=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&linkname=Great%20Font%20Resources%20for%20Web%20Development" title="Delicious" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/delicious.png" width="16" height="16" alt="Delicious"/></a></li><li><a href="https://web.archive.org/web/20100809090813/http://www.addtoany.com/add_to/stumbleupon?linkurl=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&linkname=Great%20Font%20Resources%20for%20Web%20Development" title="StumbleUpon" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100809090813im_/http://bavotasan.com/wp-content/plugins/add-to-any/icons/stumbleupon.png" width="16" height="16" alt="StumbleUpon"/></a></li><li><iframe src="https://web.archive.org/web/20100809090813if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Farticles%2Fgreat-font-resources%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li></ul></div><div class="post"><p class="tags">Tags: <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/api/" rel="tag">api</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/apis/" rel="tag">APIs</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/custom-fonts/" rel="tag">custom fonts</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/david-chester/" rel="tag">david chester</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/desktop/" rel="tag">Desktop</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/desktop-publishing/" rel="tag">desktop publishing</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/development/" rel="tag">development</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/download/" rel="tag">download</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/equivalents/" rel="tag">equivalents</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/face-kits/" rel="tag">face kits</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/flash/" rel="tag">flash</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/font-resources/" rel="tag">font resources</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/fonts/" rel="tag">Fonts</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/google/" rel="tag">google</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/loader/" rel="tag">Loader</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/new-fonts/" rel="tag">new fonts</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/others-resources/" rel="tag">others resources</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/range/" rel="tag">range</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/replacement/" rel="tag">Replacement</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/squirrel/" rel="tag">Squirrel</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/subscription-costs/" rel="tag">subscription costs</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/text-elements/" rel="tag">text elements</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/tool/" rel="tag">Tool</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/type/" rel="tag">type</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/type-foundries/" rel="tag">type foundries</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/typeface/" rel="tag">typeface</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/typekit/" rel="tag">TypeKit</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/using-flash/" rel="tag">using flash</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/way/" rel="tag">way</a>, <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tag/webfont/" rel="tag">WebFont</a></p><p class="tags">Short URL: <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/?p=2517" title="Great Font Resources for Web Development">http://bavotasan.com/?p=2517</a></p></div><div class="post"><div id="crp_related"><h3>Similar Posts</h3><ul><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/embedding-fonts-web-site-css-font-face/" rel="bookmark" class="crp_title">Embedding Fonts in your Web Site with CSS and @font-face</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/google-font-api/" rel="bookmark" class="crp_title">The New Google Font API</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/articles/moderno-v1-0-premium-wordpress-theme/" rel="bookmark" class="crp_title">Moderno v1.0 Premium WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/" rel="bookmark" class="crp_title">Easy Overlay Modal Window jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/turn-text-into-an-image-using-the-php-gd-library/" rel="bookmark" class="crp_title">Turn Text into an Image using the PHP GD Library</a></li></ul></div><div id="bsap_1249050" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div></div><div class="post"> <a href="#comment_list"></a><div id="comments"><h3 id="comments-title">Discussion <small> 1 Comment</small></h3><ol class="commentlist"><li class="comment even thread-even depth-1" id="li-comment-15003"><div id="comment-15003"><div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100809090813im_/http://1.gravatar.com/avatar/f679543657c15597b12e65e049df0439?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/></div><div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100809090813/http://www.wsoaonline.com/" rel="external nofollow" class="url">Web Design Guy</a></span> <span class="commentdate"> on July 30, 2010 at 9:06 am</span></div><div class="comment-text"><p>There are millions of font sites out there, but only a few are good at helping you get what you need. The only website that I have tried so far is Google Font API, and it’s wonderful. I’ll have to check out these other websites to see what they are all about.</p></div><div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100809090813/http://bavotasan.com/articles/great-font-resources/?replytocom=15003#respond" onclick="return addComment.moveForm("comment-15003", "15003", "respond", "2517")">Reply</a></div></div></li></ol><a name="respond"></a><div id="respond"><h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100809090813/http://bavotasan.com/articles/great-font-resources/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://web.archive.org/web/20100809090813/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"><p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p><p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required="true"/></p><p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required="true"/></p><p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30"/></p><p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2517" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/></p></form></div></div></div></div><div id="sidebar"><div id="search"><form method="get" id="searchform" action="https://web.archive.org/web/20100809090813/http://bavotasan.com/"><div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/></div></form><div class="arrow"></div></div><div id="sideads"><div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div><br class="clear"/><div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div></div> <br class="clear"/><div class="line"></div><div class="side-widget"><h4>Most Popular Posts</h4><ul class="wppp_list"><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/remove-the-title-attribute-from-wordpress-category-and-page-lists/" title="Remove the Title Attribute from WordPress Category and Page Lists">Remove the Title Attribute from WordPress Category and Page Lists</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/gradient-buttons-with-css3/" title="Gradient Buttons with CSS3">Gradient Buttons with CSS3</a></li></ul></div><div id="affiliates-ads"> <a href="https://web.archive.org/web/20100809090813/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100809090813/http://wordcampmontreal.org/" title="I'm Speaking at WordCamp Montreal 2010 - Aug 28-29" class="wordcamp"></a> <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100809090813/https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93121" class="digwp"></a> <a href="https://web.archive.org/web/20100809090813/https://www.e-junkie.com/ecom/gb.php?cl=94455&c=ib&aff=93121" target="ejejcsingle" class="defender"></a> <a href="https://web.archive.org/web/20100809090813/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a></div><div class="line"></div><div class="side-widget redlink"><h4>Get a Premium Theme for FREE</h4><p><a href="https://web.archive.org/web/20100809090813/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100809090813/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100809090813/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a></p></div><div class="side-widget"><h4>Support c.bavota</h4><p>If you would like to support <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100809090813/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a></div></div></div></div><div class="whiteline"></div><div id="footer"><div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a><div class="col col1"><h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100809090813/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/><h4 class="two"><span></span>Stay in Tune</h4><div class="tweets"></div></div><div class="col col2"><h4 class="three"><span></span>Downloads</h4><ul><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li></ul></div><div class="col col3"><h4 class="four"><span></span>Tutorials</h4><ul><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/">A Simple CSS Trick to Vertically Align Text</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/using-ajax-with-wordpress/">Using Ajax with WordPress</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/blindtoggle-for-jquery/">Blind Toggle for jQuery</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/">Shorten Your Post Titles in WordPress</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/display-rss-feed-with-php/">An Easy Way to Display an RSS Feed with PHP</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/tips-speed-up-jquery/">6 Tips to Speed Up jQuery</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/excluding-pages-from-wordpress-search/">Excluding Pages from WordPress Search</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/scrolling-back-to-top-button-jquery/">Creating a Scrolling Back to Top Button with jQuery</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/get_theme_data-developing-custom-theme-wordpress/">Using get_theme_data() when Developing a Custom Theme for WordPress</a></li><li><a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/tutorials/define-constant-php/">Defining a Constant with PHP</a></li></ul></div></div></div><div id="copyright"><div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100809090813/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100809090813/http://www.wordpress.org/">WordPress</a>.</div></div> <script src="https://web.archive.org/web/20100809090813js_/http://stats.wordpress.com/e-201032.js" type="text/javascript"></script> <script type="text/javascript">st_go({blog:'5317602',v:'ext',post:'2517'});var load_cmc=function(){linktracker_init(5317602,2517,2);};if(typeof addLoadEvent!='undefined')addLoadEvent(load_cmc);else load_cmc();</script> <script type="text/javascript" src="https://web.archive.org/web/20100809090813js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript">hs.graphicsDir='https://web.archive.org/web/20100809090813/http://bavotasan.com/images/graphics/';hs.outlineType='rounded-white';hs.outlineWhileAnimating=true;hs.showCredits=false;</script> </body></html>