Search code examples
htmlcsswebkitfont-faceandroid-browser

@font-face embedded fonts not displaying in Android Browser select tag

I am using an embedded ttf font using @font-face in my webpage.

The problem is that whenever I use it to display items or options in a select tag, everything except the currently selected item is shown as gibberish in Android browser. When I try it in a desktop browser like Chrome, it is displayed properly.

Screenshots :

Properly displayed in desktop Chrome :

Properly displayed in desktop Chrome http://img339.imageshack.us/img339/8676/pro1n.jpg

Inactive select displayed properly in Android browser :

inactive select android browser http://img59.imageshack.us/img59/4025/pro2d.jpg

Gibberish displayed when I click on the select in Android browser :

inactive select android browser http://img833.imageshack.us/img833/1461/pro3d.png

I am using the following CSS for embedding the font :

@font-face{
font-family: "MyFont";
src: url('../fonts/MyFont.ttf')  format('truetype');
}

and the following CSS rule for applying the font to the select tag :

select{
font-family: MyFont !important;
font-size: 16px;
}

select option{
font-family: MyFont !important;
font-size: 16px;
}

I have used the same font throughout the webpage and it is working properly everywhere except the select tag. How can I solve this problem ?

Solution

  • You can't. The browser is trying to do the right thing I guess, but the native control doesn't use an other font other than the default system one.

    Perhaps this is fixed in newer versions of Android, or in other browsers on Android (e.g. Chrome).

    You'll need to make your own select tag copy in JS that uses HTML to make the control up.

    Something like http://harvesthq.github.com/chosen/ will do what you need, though it's a shame, as the native controls are usually better in many ways (other than this problem!)