Using Font Squirrel with the @font-face kit – Better Web Typography

If you’re like me and would prefer not to use one of the very few commonly installed web fonts, don’t worry there is a solution.  In the past if you wanted to add a bit of flare to your content header title you might have added an image to replace the text.  The problem with using images instead of fonts is the bad quality when it’s zoomed in.  Not to mention the problem with trying to optimize your website SEO, or if you need to use multiple languages?  You could use techniques such as sIFR and Cufion.  Both work well except you’re now relying on Javascript and/or Flash, with potential performance issues.  The are also some very useful third party tools available such as Typekit and Fontdeck.  But the best solution @font-face.

@font–face is a css rule which allows you to download a font from your server if the user doesn’t already have it installed on their system.  Works as of Safari 3.1, Firefox 3.1, Opera 10 and even Internet Explorer since version 5, (although they decided to use a non standard font format.)

Start by going to Font Squirrel and finding the right font for your design. Next download the appropriate @font-face kit

Make sure to upload the font files that you’re using to the root directory of the website, and make sure that the src: url is pointing to that location.  example:

Place this bit of css code into your stylesheet and the  you can us the font just like any other!

@font-face {
 font-family: 'MyUnderwoodRegular';
 src: url('');
 src: local('☺'), url('') format('woff'),
 url('') format('truetype'),
 url('') format('svg');
 font-weight: normal;
 font-style: normal;

/* Example Use */
.font-face-example {
font-family: "MyUnderwoodRegular";
font-size: 20px;

Here is an example of the font MyUnderwoodRegular:

I’m a really old typewriter…please stop using me!

I hope this helps!