Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any working @font-face for Bengali (Bānglā) language?

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!!!

like image 806
Mayeenul Islam Avatar asked Nov 02 '13 15:11

Mayeenul Islam


Video Answer


1 Answers

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:

  • SiyamRupali.eot — (Wikimedia path)
  • SiyamRupali.woff — (Wikimedia path)
  • SiyamRupali.ttf — (Wikimedia path)

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:

  • Siyam Rupali - GitHub.com

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:

  • Language Support Status - Indic Language Support: MediaWiki.org

EDIT

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;. :)

Update 2019

unicode-range is well supported now. You can check the Can I use Status

like image 89
Mayeenul Islam Avatar answered Oct 05 '22 23:10

Mayeenul Islam