Embed Fonts Using CSS
February 10th, 2010
Embedding fonts; the holy grail of web designers.
Microsoft, since 1997, has enabled web designers to embed fonts in websites, with some caveats. First, the utility they provide to convert .ttf files to .eot, is dated to function in Windows 98. Fast forward 13 years, I have been unable to get this tool to not crash in Windows 7. Second, this utility seems to want to connect to an IIS server (which is useful for about one-quarter of websites).
For Firefox, Safari, Chrome, and Opera, .eot files are not required, and web developers may instead utilize the standard .ttf file format … except CSS rules involving .ttf files don’t work in Internet Explorer!
Fortunately, with some craftiness, it is possible to solve both these problems, as explained below.
First, we will need to gather some tools:
- A font, in .ttf format, of your choice (head over to dafont.com; this site has plenty of free, even for commercial use, .ttf files). For purposes of this article, we will assume the font of your choice is called myfont.ttf.
- A utility to convert the .ttf file (usable by browsers other than IE) to a .eot file (which IE can use).
- Some simple CSS knowledge.
1. Once you’ve got myfont.ttf, you will need to convert it to myfont.eot file, using a handy utility called, appropriately enough, ttf2eot.
(This process is outside of the scope of this article, however the developers of ttf2eot have provided documentation on their website.)
2. Place myfont.ttf and myfont.eot in your web root.
3. We will need 3 .css stylesheets and one .html markup document, so create these in your web root. The first stylesheet we will simple call ‘style.css’. The second will be called font.css, and the third will slightly deviate from this; call it ‘font-ie.css’. Finally, call the markup document, index.html.
4. Open up font.css in your favorite web document editor, and paste the following code:
{
font-family: "myFont";
src: url("myfont.ttf");
}
5. Open up font-ie.css, and paste the following code:
{
font-family: "myFont";
src: url("myfont.eot");
}
6. In style.css, paste the following code:
{
font-family: "myFont";
}
7. Finally, in index.html, paste the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/font.css" />
<!–[if IE]>
<link rel="stylesheet" href="css/font-ie.css" />
<![endif]–>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
Hello, world!
</body>
</html>
Save each file, and preview your website in a few different browsers. In each case, you’ll see “Hello, World!” rendered in all the splendor of your chosen font!
In conclusion, what exactly did we do? First, we separated each font styling (e.g. .ttf vs. .eot) into its own stylesheet. Second, we defined a third stylesheet which brings the two disparate font types together. And finally, we defined in the markup document, to (1) specify a custom font style (e.g. ‘myFont’), (2) if the browser is Internet Explorer, overwrite ‘myFont’ with styles specific to Internet Explorer, and (3) load the stylesheet for the rest of the site.
I’ve uploaded the code for the above example, you can download it here.
Happy web-mastering!
