Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 ?

Problem courtesy of: ajaybc

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!)

Solution courtesy of: Rich Bradshaw

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×