Use a Typewriter Font in Your Blog

Some people have asked me how I got the typewriter effect in yesterday's post.

I'm talking about this type of effect. It's a font called "fzm Old Typewriter." Very handy if you want to give your text the old-fashioned manual typewriter look instead of the sterile, much-overused, IBM Selectric-inspired New Courier look.

It's easy to use this font in your own blog or web page.. Here's how.

Go into your HTML editor's raw-markup mode and insert the following code on the blog page:

<style type="text/css"> 
@font-face{ font-family: "fzmOldTypewriter"; src: url('http://www.fontsforweb.com/public/fonts/1383/fzmOldTypewriter.eot'); src: local("fzm Old Typewriter"), url('http://www.fontsforweb.com/public/fonts/1383/fzmOldTypewriter.woff') format("woff"), url('http://www.fontsforweb.com/public/fonts/1383/fzmOldTypewriter.ttf') format("truetype"); 
} 
.fontsforweb_fontid_1383 
{ font-family: "fzmOldTypewriter"; } 
</style>

The above code, by itself, won't cause any changes to the page (the reader won't see any of the above markup). To invoke (use) the typewriter font, surround your actual blog content with a SPAN tag as follows:

<span class="fontsforweb_fontid_1383">

[PUT YOUR ACTUAL CONTENT HERE]

</span>

When someone reads your blog, the person's browser will go to fontsforweb.com and slurp up the "fzmOldTypewriter" font, then render your text in that font.

That's all there is to it.

You can find more great free fonts at fontsforweb.com.

If you found this tip helpful, share this post with your Facebook and Twitter friends. Thanks!