3

I have html content (combined Persian an English text) with attached css, all css style applied correctly but font.

The css have fontface like this:

@font-face{
        font-family: 'BYekan';
        font-weight: normal;
        font-style: normal;
        src: url(../Fonts/BYekan.ttf); 
    }

the font only applied to english text and not the persian. the font is a standard ttf persian font (BYekan.ttf) so nothings wrong with it.

I googled a lot and almost every body said it's a bug in WebView android > 3.0, the problem still exist in android 4.

https://code.google.com/p/android/issues/detail?id=38536 https://groups.google.com/forum/#!topic/persian-computing/4Fm7JfiOkJk

The only workaround that I found is using svg fonts instead, but this does not work for me either. Custom font for webview

So how can I solve this?

note1: this question probobly asked alot, like this:
Persian @font-face doesn't work in Chrome, Bug or not?
but it's an old question and the given advice not working anymore (at least for me).

note2: When I open the page in chrome desktop browser font applied correctly.

Community
  • 1
  • 1
mehdok
  • 1,499
  • 4
  • 29
  • 54

2 Answers2

1

i have found the workaround

try these font faces 

@font-face {
font-family: 'yekan’;
src:url('fonts/yekan.eot?#’) format(‘eot’),    
      url('fonts/yekan.woff') format('woff'),
      url(‘fonts/yekan.ttf’) format(‘truetype’); 
}

IMO use SVG font for persian language

Maveňツ
  • 1
  • 12
  • 50
  • 89
  • the `css` you mentioned didn't work, in the original question i mentioned that `svg` font tested and did't work either (i converted the `ttf` to `svg` via online tool, may something went wrong, i don't know). – mehdok Aug 18 '14 at 07:57
0

I've converted the mentioned font in your question and uploaded it in the following Internet address:

bYekan Web Font Package

Also, You must use the following Style Lines:

@font-face {
    font-family: 'BYekan';
    src: url('../Fonts/byekan-webfont.eot');
    src: url('../Fonts/byekan-webfont.ttf') format('truetype'), url('../Fonts/byekan-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/byekan-webfont.woff') format('woff'), url('../Fonts/byekan-webfont.svg#BYekan') format('svg');
    font-weight: normal;
    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