Using CSS font-family to select Droid fonts not working on Android

Question

I discovered that the following HTML code does not work on Android (it will only use the default font: Droid Sans. On desktop it is working as expected.

<p style='font-family: "Droid Sans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Sans Mono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Serif",serif;'>vând whisky și tequila, preț fix.</p>

Solution 1

You probably don't have an @font-face declaration for the other typefaces in your css. I imagine you only have one for Droid Sans. You need one for each typeface. For example, in your css you should have:

@font-face {
    font-family: 'DroidSans';
    src: url('font/DroidSans-webfont.eot?') format('eot'),
         url('font/DroidSans-webfont.woff') format('woff'),
         url('font/DroidSans-webfont.ttf') format('truetype'),
         url('font/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSansMono';
    src: url('font/DroidSans-Mono-webfont.eot?') format('eot'),
         url('font/DroidSans-Mono-webfont.woff') format('woff'),
         url('font/DroidSans-Mono-webfont.ttf') format('truetype'),
         url('font/DroidSans-Mono-webfont.svg#webfontSOhoM6aS') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSerif';
    src: url('font/DroidSerif-webfont.eot?') format('eot'),
         url('font/DroidSerif-webfont.woff') format('woff'),
         url('font/DroidSerif-webfont.ttf') format('truetype'),
         url('font/DroidSerif-webfont.svg#webfontw7zqO19G') format('svg');
    font-weight: normal;
    font-style: normal;

}

And then in your code, your font-family should be the same as those you declared in the css above (i.e. font-family: 'Droid Sans'; is not the same as font-family: 'DroidSans')

<p style='font-family: "DroidSans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSansMono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSerif",serif;'>vând whisky și tequila, preț fix.</p>

Try it and see how you get on.

Solution 2

It seems Android only recognizes family names defined in system_fonts.xml (fonts.xml up to gingerbread). E.g. to get Droid Serif you're suppossed to write the generic serif. See this answer for details.

Oh, and there is a quirk with 'Droid Sans': that one name is in the config since 4.0 but the .ttf is a symlink to Roboto.

<speculation> I can see how early in Android's life someone said "we're only going to have three fonts so it's better if developers only use generic names, that way we can always replace them" </speculation>

But it's unfortunate. There are many reasons why the actual font you'll get might be different:

• Before 4.0 you get the Droid family, after you get the Roboto family.
• Firefox is bundling Open Sans and Charis SIL and using those instead.
• Manufacturers might replace the 3 fonts with their own. EDIT: I can't find any confirmation this actually happens.

In all these situations it'd be nice if I could reference a specific font by actual name in my font stack. Alas, I can't.