Custom fonts embedding: no hacks, no Javascript, no Flash.

gyo — Thu, 03 Dec 2009 23:08:24 +0000

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

Alternative sIFR-lite

gyo — Sun, 12 Apr 2009 21:09:03 +0000

I've playing around with sIFR (v2, v3 and jquery plugins) because I really love the concept behind it.
After some tests and fights I found sIFR-lite.
Dave at allcrunchy.com did a stunning job, and the result is a light-weight sIFR library (about 4k) that works better than the original, at least for me. Faster, lighter, better.

I decided to make some improvements to make it more flexible while keeping it super compact.

This version includes:
- Fixed a bug with Flash Player 10+ (thanks to a comment from Patrick)
- CSS text alignment is now supported

Please refer to the homepage of sIFR-lite for the documentation.

I do not take the full credits of sIFR or sIFR lite; the aim of this project is only to provide an alternative version with some bug-fixes, and some new features not included in the original.

Anyway... I'll be posting updates here, any input is welcome!

distortion » text-replacement

Custom fonts embedding: no hacks, no Javascript, no Flash.

Alternative sIFR-lite