How do I package a custom TrueType font with a web site so the browsers will render it?

Question

I'm developing a website for someone but they want (insist) that the title be in a non-standard font. (The customer is always right.) I have the TrueType (.ttf) font but how do I bundle this with the website so that it uses it?

I tried putting it in the Images folder and tried to access it with the style sheet:

font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)

But that didn't work. How do I include a non-standard font in a way which will render?

In case it's useful, this is an ASP.NET 2.0 site.

Answer 1

You have two options:

1. Create an image instead of using text
2. Use sifr to convert your text to the .ttf font

Answer 2

There is currently no standard way to do this. You could use @font-face, but it's not supported in all browsers. As Lance mentioned, this is a great place to find a support reference for the major browsers.

There is an effort to standardize this type of thing. The Web Open Font Format (WOFF) is such an effort. It looks like this may even be adopted by the major browsers in the future. We will have to wait and see.

For now, the best you can do is to reference your font like you normally would, but add a default (standard) font after that.

font-family: "Arial Rounded MT Bold", "Times New Roman", Serif

Answer 3

You have lots of options, none of them perfect. Smashing Magazine has a great article about rich fonts - most of them involve flash / image replacement.

http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/

Answer 4

There is a fair amount of activity on the subject of distributing fonts along with websites, but it's generally in the experimental stage, and won't work for the vast majority of browsers in use. In a few years you may be able to do this, but for the moment you would have to use an image or sIFR.

Answer 5

Convert your TrueType font into an Embedded OpenType font (it's easy!) so that you have two font files:

• Arial_Rounded_MT_Bold.ttf
• Arial_Rounded_MT_Bold.eot

Then make your CSS look like this:

@font-face {
  font-family: 'Arial Rounded Bold';
  src: url('Arial_Rounded_MT_Bold.eot');
}
@font-face {
  font-family: 'Arial Rounded Bold';
  src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
  font-family: 'Arial Rounded Bold', serif;
}

Thanks to Internet Explorer, the EOT specification needs to be first, in a separate @font-face block and without the format attribute. More info here.

Enjoy!