I'm struggling to embed Bengali (Bānglā) Unicode fonts into my website for a couple of days and I tried many things. Even I got some wonderful solutions for @font-face
like unicode-range
(see deceze's answer). I even tried the so-called Bulletproof @font-face Syntax Tutorial by Paul Irish. But finally found that the font embed looks working, but actually not working at all. If I delete the Bānglā font from the PC (/windows/fonts
), then my browser fails to load the font from the system, and it's not working. What I'm using for @font-face
is:
@font-face {
font-family: 'Siyam Rupali';
src: url('fonts/siyamrupali-webfont.eot');
src: url('fonts/siyamrupali-webfont.eot?#iefix') format('embedded-opentype');
src: local('Siyam Rupali Regular'), local('Siyam Rupali'),
url('fonts/siyamrupali-webfont.woff') format('woff'),
url('fonts/siyamrupali-webfont.otf') format('opentype'),
url('fonts/siyamrupali-webfont.svg#siyam_rupaliregular') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+0980-09FF; //Bengali Range (source: http://www.unicode.org/charts/PDF/U0980.pdf)
}
And regardless to say that I downloaded the Siyam Rupali
font from the web (forgot the source I'm afraid), then made the webfonts using FontSquirrel's @font-face generator.
And I called the font as:
body{
font-family: "Siyam Rupali", Cambria, sans-serif;
}
Result: Not Working!!!
After long challenging research, I failed. But suddenly I remember my den in Bengali (Bānglā) Wikipedia, wherewith the help of Jayanthanath, we the community embedded "Siyam Rupali" into Bengali (Bānglā) Wikipedia. The discussion can be found here in this Village Pump discussion archive. Then I got an Idea and observe the font-embeds' success result in bn.wiki. Then using Firefox's "Web Developer" add-on, I viewed the whole bunch of CSS of Bengali (Bānglā) Wikipedia home page. And found 'Siyam Rupali' there. Then copied the syntax exactly from there:
@font-face { font-family: 'Siyam Rupali';
src: url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.eot?version=1.070');
src: local('Siyam Rupali'), url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.woff?version=1.070') format('woff'), url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.ttf?version=1.070') format('truetype');
font-style: normal;}
I then implemented my CSS accordingly. But still having issues. Then I copied the path of the files used in bn.wiki:
and downloaded the exact font. And after that, I found some unwanted mismatches in sizes, with the version of the font I had.
+=====================+====================+ | PREVIOUS FILE SIZES | BN.WIKI FILE SIZES | +=====================+====================+ | EOT : 23KB | EOT : 144KB | | TTF : 47KB | TTF : 392KB | | WOFF : 26KB | WOFF : 166KB | | SVG : 71KB | [NO SVG] | +=====================+====================+
I thought that can make some difference in proper glyphs. So simply replaced my fonts with the newly downloaded versions. And with my final bit of code:
@font-face {
font-family: 'Siyam Rupali';
src: url('fonts/SiyamRupali.eot?version=1.070');
src: local('Siyam Rupali'), url('fonts/SiyamRupali.woff?version=1.070') format('woff'), url('fonts/SiyamRupali.ttf?version=1.070') format('truetype');
font-style: normal;
unicode-range: U+0980-09FF; //Bangla Range (source: http://www.unicode.org/charts/PDF/U0980.pdf)
}
It simply works like a charm! I'm not concerned about IE6, because even with the bulletproof, it's dumb! :( I tested Firefox 20.0, Opera 10.10, and Chrome 30.0.1599.101 m.
The font Siyam Rupali is now available over the developer community:
Thanks to Tanbin Islam Siyam (the Potasiyam) for his wonderful font: Siyam Rupali.
And also the following list can provide a good overview of the present condition of the improvement of Bengali (Bānglā) Unicode availability:
I found unicode-range:
causing a problem in Chrome. As Siyam Rupali is a very good font with a vast collection of glyphs, we need not mention the range. So, you can avoid unicode-range: U+0980-09FF;
. :)
unicode-range
is well supported now. You can check the Can I use Status
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With