distortion

How to use custom fonts without sIFR, or any Javascript/Flash hacks?
Here is a CSS-only solution: @font-face

You can see a demo preview here, or download the files.

Introduction
We need to convert our preferred font into 3 different formats, to be sure it will be properly displayed on all the Browsers/OS flavours:

TTF or OTF - FireFox 3.5, Safari, Opera
EOT - Internet Explorer 4+ (Yes, it works on IE too...)
SVG - Chrome, iPhone

To convert the fonts to TTF/EOT/SVG it's very easy, we'll just need one tool (or more depending on the source format).

The tools
FontSquirrel - Font Generator
This tool is amazing. It converts a TTF/OTF file to the different formats we need to embed a font in a website.
It also compresses the font allowing us to choose the characters we need, stripping out all the others, resulting in a light version of the font. go to the website

Font converter
Another great online tool to convert fonts to/from different formats (.dfont, .ttf, .eot, .pfb, .otf). go to the website

Font Forge
The opensource font authoring tool. go to the website

And now, let's get our hands dirty...

The Code
Now that we have the files we need (TTF or OTF, EOT and SVG), we're ready to embed the font in our website.
Here is the CSS code:

@font-face {
   font-family: 'Museo500';
   src: url('Museo500-Regular.eot');
   src: local('Museo 500'), local('Museo-500'), url('Museo500-Regular.ttf') format('truetype'), url('Museo500-Regular.svg#Museo-500') format('svg');
}

With font-family, we define the name to use in our CSS rules:

h2 { font: 38px 'Museo500', Arial, sans-serif; }

As you can see, we treat "Museo500" like any other font we normally use in CSS; there are also the fallback fonts, that will be used just in case something goes wrong. Done.

Some notes
If you want to use custom fonts then this is a hard match to win for sIFR & Friends.

A negative point is that the Browser will show the fallback font until the custom one is loaded; on my humble ADSL connection it's very quick, but still noticeable.
Though, once the font files are cached it doesn't happen anymore.

It's true that many users can't upgrade Browsers because of restrictions on their systems... well, I bet they are running Windows, and @font-face works on Internet-Explorer; while if they are on a Mac it works on Safari.
The only "black-sheep" could be (surprisingly) FireFox, which only supports TTF/OTF since version 3.5 (the new version 3.6 also adds support for WOFF font files).

Last but not least, make sure the font's license gives you permissions to embed it in a website.

Conclusion
Web fonts embedding is becoming more and more supported, and I'm sure it will be soon a common practice. So, why not to start now?
This is not the latest trick to use custom fonts in websites, this is the future of web typography.

Spread the voice.

Related links
I made a light version of the subject, here you can find the most extensive and complete resources: Paul Irish and Jonathan Snook.
For my example I've chosen the beautiful font "Museo" by Jos Buivenga's exljbris Font Foundry

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.