5

Not sure if I'm heading a bug in Chrome or something is wrong with my CSS

Here is a demonstration of what I'm talking about: demo link

The problem is that I'm using a custom Farsi font in my website named as BMitra (it is absolutely free in public domain) and all major browsers (latest FF and IE6+) are rendering this font just fine but my Chrome skips this font and switches to system's default tahoma.

Here is my CSS:

@font-face {
    font-family: 'BMitra';
    font-weight: normal;
    src: url('fonts/regular/BMitra.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/regular/BMitra.woff') format('woff'), /* Modern Browsers */
         url('fonts/regular/BMitra.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/regular/BMitra.svg#svgBMitra') format('svg'); /* Legacy iOS */
    }

@font-face {
    font-family: 'BMitra';
    font-weight: bold;
    src: url('fonts/bold/BMitraBd.woff') format('woff'), /* Modern Browsers */
         url('fonts/bold/BMitraBd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/bold/BMitraBd.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/bold/BMitraBd.svg#svgBMitra') format('svg'); /* Legacy iOS */
    }

So, any ideas? is this a bug in webkit or something else. thanks in advance.

Side-notes:
  • The original font is in true-type format and I converted it using an online tool. but I'm sure that the font is not damaged because all other formats are working fine.
  • I've just figured out that someone had the same problem (here is the link) but the solution is not working at all! it also breaks functionality in IE9!
  • I can see that Chrome loads the fonts in Chrome's console so the problem is not with webserver or nonavailability of font resources at the time of page load.
Community
  • 1
  • 1
Sepehr
  • 2,051
  • 19
  • 29
  • It seems that Chrome doesn't properly render the font in the preview window of the Resources tab. – Evan Mulawski Jun 10 '12 at 17:37
  • To add to your woes, in Chrome beta (20) it looks fine except for the top

    which shows Farsi characters interspersed with the "empty box" glyph, if I change the H1's size from 25px to something else it renders correctly for some reason

     – Alex K. Jun 10 '12 at 18:11
  • @AlexK. exact same behavior here on Chrome Canary. weird. It looks like it's a bug, isn't it? – Sepehr Jun 10 '12 at 20:30

2 Answers2

6

It's not a bug. Your font is not standard and also it's not working correctly in Firefox 11 as well (it shows the characters separated from each other which is the sign of the bad font). You can find the new series of Persian fonts for web here. These fonts have no issue with the new versions of the browsers: http://www.scict.ir/Portal

VahidN
  • 18,457
  • 8
  • 73
  • 117
0

I've converted the mentioned fonts in your question and uploaded them in the following Internet addresses:

bMitra Web Font Package

bMitraBd Web Font Package

Also, You must use the following Style Lines:

@font-face {
    font-family: 'BMitra';
    src: url('fonts/regular/bmitra-webfont.eot');
    src: url('fonts/regular/bmitra-webfont.ttf') format('truetype'), url('fonts/regular/bmitra-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/regular/bmitra-webfont.woff') format('woff'), url('fonts/regular/bmitra-webfont.svg#BMitra') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BMitra';
    src: url('fonts/bold/bmitrabd-webfont.eot');
    src: url('fonts/bold/bmitrabd-webfont.ttf') format('truetype'), url('fonts/bold/bmitrabd-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bold/bmitrabd-webfont.woff') format('woff'), url('fonts/bold/bmitrabd-webfont.svg#BMitra') format('svg');
    font-weight: bold;
    font-style: normal;
}

and, you should add the following lines in the .htaccess file:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
MRS1367
  • 1,053
  • 1
  • 14
  • 40