Custom typography in Magento – @font-face

Featured Image

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.


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;


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.

About Hrvoje Jurisic

Team Leader, Frontend Developer, Designer / Illustrator

Hrvoje is Certified Frontend Magento Developer and creator of Inchooers, your favorite comic.

Read more posts by Hrvoje / Visit Hrvoje's profile


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.