Custom typography in Magento – @font-face

If you want to add some juice to your e-commerce website, and be different from the others, you could add some custom fonts for you headings, product titles or prices.

The best technique these days, in my opinion, is to use browser’s native method: @font-face. With a little tweaking, you can make it work in almost all browsers.

Usage

The basic usage would be to add @font-face rule to your stylesheet, with a path to your font file.

@font-face {
        font-family: KomikaDisplayRegular;
        src: url(/KomikaDisplayRegular.otf);
}

And then when you want to use that font, just reference it in your CSS declaration.

h1 {
        font:60px/68px 'KomikaDisplayRegular',Arial,sans-serif;
}

This method needs a little tweaking in order to work across all browsers. It is supported in IE for years now, in Chrome, Firefox 3.5+, Safari 3.2+, Opera 10+. The problem is than each one of them uses different font file type ( EOT, OTF, TTF, SVG or WOFF ), so to be sure it works in all browsers, you should include all this file types in your @font-face declaration.

Maybe the best way for implementation of @font-face is to go to Fontsquirrel, where you can download @font-face kit with your desired font. You can even upload your font-file, and FontSquirrel will generate a @font-face kit for you. Just make sure your font is legally eligible for web embedding.

After that it’s all pretty straight forward. Create fonts folder in your skin folder, and put your downloaded font files there.
Open your CSS file and make your @font-face declaration

@font-face {
	font-family: 'KomikaDisplayRegular';
	src: url('../fonts/KomikaDisplayRegular.otf');
	src: local('?'), url('../fonts/KomikaDisplayRegular.woff') format('woff'), url('../fonts/KomikaDisplayRegular.ttf') format('truetype'), url('../fonts/KomikaDisplayRegular.svg#webfontzqb2Knxj') format('svg');
}

And then reference your font in selector declaration where you need it

p.style1 {
     font:18px/27px 'KomikaDisplayRegular',Arial,sans-serif;
}

Downsides

One of the most mentioned drawback is that you can see the fallback font for a moment before the included file is loaded. The other one is that some fonts have ugly rendering in some browsers or platforms. For those who find this drawbacks important, there are other methods for custom fonts embedding to consider; you could try with Cufón, for example.

Generally, this method is widely adopted in the moment; it’s pretty lightweight compared to other methods and it’s, according to statistics, currently supported on more than 92% of platforms, so don’t fear using this method.