Embedding Custom Fonts In A Web page

Last night I ended my article on web-safe cursive fonts, saying that I'd post today explaining how to embed a custom font in a web page, such that all readers could see it, regardless of whether they have the font installed on their machine or not.

First though, a digression.

I want to propose the definition of an internet law, or at least a rule of thumb. It goes summat like this:

Whenever the word "unfortunately" appears in an article about web-page design, the words "Internet Explorer" will follow very shortly thereafter.

We could call it the "Goddamnthisheapofbadlyexecutedshite Law." Just a suggestion.

So, that slight digression over, embedding a font really is quite easy. But not, unfortunately, as easy as it should be, due to Internet Explorer's inexplicable insistence on wanting a file-type all to itself if the font's stored online, even though it's perfectly happy to use the same file-types as all the other browsers if they're stored locally.

*sigh*

First, let's download you a custom font. A Google search for "free fonts" will turn up more of such than you can shake a very shakeable stick at if you spend a whole day shaking it. I chose this rather flowery cursive script, by way of an example. Which I'll just have to plump for providing a picture of, as I don't have custom fonts on Word press:

You'll notice, after unzipping the file, that it has the extension .ttf (for True Type Font). That's the bit IE doesn't like, so we'll need to convert it to .eot (Embedded Open Type), which IE gets on with like a house on fire. To do this, either visit Font Squirrel and follow the instructions there, to upload your ttf and have it converted for you—they provide you with a zip-folder to download, with the converted files in—or, if you prefer to do stuff like this on your own desktop, download EOTFAST and follow the included instructions. (It comes with a handy test-page, too, if you want to make sure you're doing everything right before uploading to your site.)

Now make yourself a folder named fonts. This is where, if you hadn't guessed, you'll be storing this, and any other custom fonts you want to use, so bung the ttf and eot files in there.

Now the fun part! The CSS. I'll do it in baby steps, in case you've not come across browser-specific styles before, as we're going to have to aim some styles specifically at IE.

If you prefer your CSS in the head of your page (Why??? You really really shouldn't!), you'll want this:

<style type="text/css">
<!--[if IE]>
@font-face {
	font-family:my_font_ie; /* Your choice of name for the ie font-family here */
	src: url('fonts/AnnabelScript.eot'); /* URL of the eot font file here */
	}
<![endif]-->
@font-face {
	font-family:my_font; /* Your choice of name for the font-family here */
	src: url('fonts/AnnabelScript.ttf'); /* URL of the ttf font file here */
	}
.handwriting {
	font-family:my_font, my_font_ie; /* Just like a normal font stack */ 
	}
</style>

If, however, you prefer separate style-sheets, do it like this:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />

Now you'll need to create a new style-sheet for IE, named style_ie.css and place the style for IE in that:

@font-face {
	font-family:my_font_ie; /* Your choice of name for the ie font-family here */
	src: url('fonts/AnnabelScript.eot'); /* URL of the eot font file here */
	}

Then add this to your regular style sheet

@font-face {
	font-family:my_font; /* Your choice of name for the font-family here */
	src: url('fonts/AnnabelScript.ttf'); /* URL of the ttf font file here */
	}
.handwriting {
	font-family:my_font, my_font_ie; /* Just like a normal font stack */ 
	}

[Remember! If you're using relative links in a style-sheet, the the link should be relative to the location of the style-sheet, not of any page it might be aimed at.]

And that's all there is to it. Just use the class name you chose whenever you want to use that font; as, for instance, <p class="handwriting"> … </p>

Hope that's of use to someone!

Right then—I'm off to play Bejewelled or summat for a bit, to try to get used to this damned optical mouse contraption…
—Daz

---

You may use these HTML tags in comments
<a href="" title=""></a> <abbr title=""></abbr>
<acronym title=""></acronym> <blockquote></blockquote> <del></del>* <strike></strike>† <em></em>* <i></i>† <strong></strong>* <b></b>†
* is generally preferred over †

About these ads