Custom Fonts using @font-face in HTML/CSS

One of my latest project involved @font-face which means using a custom font for your web content. It was my first experience working with @font-face as I never heard about it before therefore I thought I will share my experience with my readers.

As you know we cannot use custom fonts in a website as it will not properly display on a computer which doesn’t have these fonts installed, thus it will be replaced by system default fonts, in windows if a font is missing it is normally replaced by Times New Roman, so to avoid this we define font like font-family: Arial, Helvetica, sans-serif, Arial is default for Windows, Helvetica is default for Mac. About Sans-serif I never used Mac personally so I am not sure if it is available on Mac or not but it is surely installed by default in Windows. So this is the normal approach we follow so that we know how our website text will show up in different platforms.

What if we want to use a stylish custom font which is not installed by default in any of the Operating systems, in fact we want to show a specific custom font on all platforms? In normal cases it will be really difficult to do so. So here come’s the use of @font-face, we can achieve this requirement by using @font-face.

It’s not that @font-face is really the only and perfect solution. One of my friends told me to compare my method with cufon. Unlike @font-face cufon is very natural, the output is very delicate with smooth edges, but the only thing that I didn’t liked about it is its JS based. So the problem comes when your visitor is on a secured machine and it won’t let the visitor load JS files, I think most of the firewalls block JavaScript by default. So in my case I didn’t used it. The second disadvantage of cufon is the file I generated through the cufon font generator http://cufon.shoqolate.com/generate/ size is almost 115KB which is really huge compared to the original fonts that I used are of just 52KB, so it made it 52 x 2 + 11 = 115kb, if you expect your site to load quickly within 2 3 seconds then I wont recommend this approach. So let’s look at my best technique that I used in one of my project @font-face.

The best thing I liked about it is it uses CSS, we call original fonts that we stored on our server through CSS and the custom font is displayed, so no JavaScript is involved. My CSS file with my entire site styles is 7KB and the font files are of 54KB, ok let me clear one thing which is most important is that IE, Firefox, Opera, Chrome and Safari uses three different font formats, that is EOT, OTF and WOFF.

1. EOT – Embedded Open Type
2. OTF – Open Type Format
3. WOFF – Web Open Font Format

Now you must be thinking that how to get the entire font formats. So here is a font generator Font Squirrel (http://www.fontsquirrel.com/fontface/generator).

I liked it because if generates you all the three font types but also generates CSS code for it and gives you one demo.html file which shows the working version of the @font-face, so if you don’t know how to use it, you don’t need to worry about it. Let me explain the CSS structure of a normal @font-face

@font-face { font-family: ‘1’; src: url(‘2’.eot); src: local(‘3’), local(‘4), url(‘5’) format(‘woff’), url(‘6’) format(‘opentype’); }

1. This is the string that will be used to call in a css statement, any name that is most easily remembered and can be typed easily, let’s say here I name it UNiCRES. So in my CSS declaration I will use font-family: UNiCRES; It will be wise to use system default fonts with it as somehow your font files might not be accessible because of any reason and your site will all be messed up, I will recommend to use defaults like Arial, and Helvetica, so my font-family will be completed as font-family: UNiCRES, Arial, Helvetica. Your visitor browser will first check UNiCRES if it is not accessible it will look for Arial and at the end will look for Helvetica, if none of these is accessible it will then use that visitor system default font.
2. This will be the source of the actual file format for the format EOT. So you will have to use actual name of the font let’s say fontname.eot
3. well it’s not necessary that the font family you are using in your site will not be present in the visitor system. So you use the most common name here for that font format. Remember I read an article URL (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/) that use smiley for the font name as another type of font might be present in a visitor system. So rather use a smiley ‘☺’ the smiley really looks good. As none of the font name can be a smiley so it will not let the CSS selector look in the client computer but will always use the font from your server. I liked this approach but in my case the font I used in my system is normally present in most of the systems that comes up with a few Text Editors.
4. – As above –
5. URL of the woff (Web Open Font Format), you don’t need to mention the format.
6. URL of the otf (opentype font format), you don’t need to mention the format.

So this was the basic structure of @font-face declaration. Now you can simply type the font family: (1); which is the name you declared in your @font-face declaration. You should declare the @font-face on top of your CSS file so that it is already processed, before it is called by the CSS selector.

Let me now summarize the article now, if you want to use a custom font for your rich graphics based site, you should go for cufon as it will render the font very smoothly but the main disadvantage will be poor SEO, while using @font-face will give you edge when it comes to SEO but is rendered poorly in few browsers. The choice is yours now to use whichever method you prefer 🙂

If you have thoughts to share about this article, or you want to add something to this article please do comment. You comments are always welcome

Updates

I have further discussed this approach in a new and better approach, please read that article at Custom Fonts using @font-face in HTML/CSS – Etended.