Add Custom Fonts to Your Website

Are you tired of using the same old boring web fonts?  Without describing all of the browser compatibility problems in detail, here’s a quick and dirty way to embed custom fonts in your websites.  This really takes the appearance of your site to the next level!

First, you need a font.  A great source for royalty-free desktop fonts is www.fontsquirrel.com.  Another is www.fonts2u.com.  Be careful about using any any random font from your computer’s font directory, because it might have licensing issues that make it illegal to use on a public website.  But, you can use a licensed desktop font if you want.

Next, download the font file, usually with a .ttf suffix.  This font file is usable on your desktop but not quite ready for the web.

A very cool feature of Font Squirrel is that it will transform desktop fonts into a set of fonts suitable for the web (in all major browsers!).  Go to the Font Squirrel Font Face Generator.  Click on “Add Fonts” and find the path to your font file.  Click the check box to declare that your font is indeed legal to use on a website, and then hit “Download Your Kit”.

You’ll get a zip file with several files in it.  Upload the .eot, .svg, ttf. and .woff files to your web sever, in the same directory as your CSS file.  (You can put it into a “font” directory, but then you will have to edit the CSS code below to add that path.)

Note that www.fonts2u.com offers “web ready fonts” but when I tried it, they didn’t work with IE8.  I recommend getting the desktop font and using Font Squirrel’s tool to create the web ready fonts.

Next, take a look at the stylesheet.css file that came in the zip file.  This has the @font-face declaration that you need to add to your CSS file.  It will look something like this:

@font-face {
font-family: 'ArialNarrow';
src: url('arialn-webfont.eot');
src: url('arialn-webfont.eot?#iefix') format('embedded-opentype'),
url('arialn-webfont.woff') format('woff'),
url('arialn-webfont.ttf') format('truetype'),
url('arialn-webfont.svg#AriaNarrow') format('svg');
font-weight: normal;
font-style: normal;
}


In this example, the name of the font is “ArialNarrow”.  Add this code to your CSS file to define the font. Now, to use this font, just add the font-family property to the appropriate CSS tag. For example:

p {
font-family: "ArialNarrow";
}

That’s it! The font should appear in ALL major browsers, which is a minor miracle. By the way, I use this technique in the headings on this site, so it DOES work. Let me know how it works for you.

– Brian

Leave a Comment or Ask a Question