google chrome undetermined behavior with persian font-face; some parts are showing as squares

302 Views Asked by At

I use Bootstrap and a persian font in a site. only when the browser is Chrome(Version 43.0.2357.124 m) some of it's contents are shown as squares. if the bootstrap.min.css removed from the page the it's work properly. also if the browser is resized the squred texts are shown as well.

<table class="table">
<tbody><tr>
    <th>
        تاریخ ثبت
    </th>
    <th>
        عنوان
    </th>

    <th>
        خلاصه
    </th>
    <th></th>
</tr>

<tr>
    <td>
        2015-06-14
    </td>
    <td>
        تست 
    </td>

    <td>
        تست
    </td>
    <td>
        <a href="#">ویرایش</a> |
        <a href="#">مشاهده</a> |
        <a href="#">حذف</a>
    </td>
</tr>

style:

@font-face {
font-family: "B Koodak";
src: url("../fonts/BKoodakBold.ttf") format("opentype"), url("../fonts/BKoodakBold.woff") format("woff"), url("../fonts/BKoodakBold.otf") format("opentype");}

renderd in chrome

i realize from this question that this is a known chromium issue.

1- this issue is still not fixed or it's my fault?

2- is issue is not fixed yet, there is any way to handle it?

1

There are 1 best solutions below

0
On

Try to add in your @font-face:

 font-weight: normal;
    font-style: normal;

But I think Persian fonts aren't all supported by google.