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.
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’); }
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
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.