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.