About a Year ago, I had a idea, Making a service like Google Web fonts for Bangla. So that no one have to worry about whether the visitor have a bangla font or not. That idea is still inside my head, But before that, A proper discussion About bangla font on web was needed.
What is @font-face?
In a simple word, its the best way to embed a font in your webpage, that will let the visitor view your site with your preferred font. From a simple IDEA, it become the most viral technology about web font. And it hit the top when mighty google comes with Google Web fonts which basically build on @font-face.
From the last report, the current picture is like this,
** IE 10 and IE 9 Supports WOFF
So lets Do Coding
Problem is, There is basically no way to use a single font type to make it work properly. At least two font type is needed to Make it visible to most of the PC user. And If you want to add mobile user support, You have to work a bit extra.
Before i start, I should warn you, people made thousands of post about @font-face and there are more methods of this then “How to Cook Potato?”. So before you start, You have to keep one thing in mind, What are you expecting from your visitor? If you are using a unique font, Then you are certain that your visitor don’t have a copy of that font installed in his/her system, So you have to make the code work ready to download the font from your server and serve it. But if you are using a common font ( Not so common, But maybe people use it as a fancy font ), There is a possibility that some user might have it in their system. So lets be confirmed first.
Most of the modern browser have a bit brain that it can determine whether the embedded font is in the system or not, So you can go for the simple code unless you targeting every types of Visitor.
src: url('somefont.eot'); /* yeah, some people do use IE */
src: url('somefont.eot?#iefix') format('embedded-opentype'), /* And Some people use OLD IE */
url('somefont.ttf') format('truetype'), /* Smart Browsers */
url('somefont.svg#svgFontName') format('svg'); /* iOS Driven Devices have a lots of Customer, This is for them */
This is how you tell the browser to get the font. Now how to use it in your design?
font-family: 'somefont', Fallback, sans-serif;
From the First Code,
Its where you declare the font family, and in the 2nd code, you call it using its font family name.
There are a few complexity with bangla font face. I will try to Explain it as much as possible.
There are two era of Bangla computing, From General Margin. One is Avro ( Open Source ), Another is bijoy ( Paid Software ). Avro use siyam rupali as its default font, Bijoy use SutonnyOMJ. Now problem is, What you gonna do with it? First we will add a font as a risk management system. If there is no bangla font in the system, this will save you.
I used Kalpurush As its my favorite bangla font.
src: url('http://static.ioritro.com/font/kalpurush.eot?#iefix') format('embedded-opentype'),
Careful: When you are working with Bangla Font-face, Try to keep the font-family as the original. So, if the system has the same font installed, browser won’t download a copy. Its for your own good.
Combining this three types of Font, its about 1.27 mb, Its really a problem for those who has a slow internet connection.
Now lets Add it in the Site,
font-family: SolaimanLipi, 'Kalpurush', Siyam Rupali, SutonnyOMJ, Lohit, English Fonts;
Now as you can see, I’ve added Five bangla font here, SolaimanLipi, Kalpurush, Siyam Rupali, SutonnyOMJ and lohit. Its a little trick for Bangla font. These Five Bangla fonts are the most popular bangla font around the globe. So the main thing is, First the browser will check if these fonts are available in the system. If not, then it will download kalpurush. So it will save you from a lots of Hassle. After Adding this five Fonts, You can add rest of the English font, If you want.
Note: Some Developer Suggest to add bangla font after English fonts. Because of the way CSS render, If you add english font first, It will help you if there is a lot english text in your site. But if its all about Bangla, Then You should go with the way i’ve showed.
One more thing, Try to make the bangla font a bit larger. Try 16px, Its good enough to read.