CODEWITHSUNDEEP
androidcss
wyc
wyc

Reputation: 55353

Assigned the Droid Serif font to an HTML element but my Android phone still displaying Droid Sans?

I have this in my CSS:

.like-counter span, .entry-content h2 {
    color: #444;
    font-family: Bitstream Charter, "Droid Serif", Gerogia, serif;
    font-weight: bold;
}

In my computer, I see a serif font. If I remove the first one, then I see the Droid Serif font. I thought this font was a default font in Android devices.

But when I open the site on my Android phone. I'm still seeing Droid Sans.

What could be causing this?

EDIT:

I discovered that the problem only happens when I display the page in Android's default browser. In Firefox, I can see the Droid Serif font (strange).

Upvotes: 2

Views: 2589

Answers (2)

Blender
Blender

Reputation: 298582

Instead of guessing the default fonts, you can just use the generic serif font:

font-family: serif;

serif will be the browser's default serif font.

Upvotes: 3

Adam L. S.
Adam L. S.

Reputation: 934

On older Android systems (until a version that I'm not aware of) the browser instead of checking the full list of possible fonts, it checks the very first entry of the font family, and if it is known to the browser, what to substitute it with, then it will use that, otherwise it will throw away the whole list.
This is notable, if you just use Times for example, it will use Droid Serif, but if you add some fancy font before it, it will use Droid Sans, regardles of the rest.

Obviously it will work, if you put the “serif” in first place, but then all the browser use the default serif font, instead of whatever you want. Because of the simplicity of the font selection on older Android, you can add a "serif" family to the first place, which will be interpreted as Droid Serif on the old Android, but other browsers will look (and hopefully fail) for a font named “serif”.

Also—interestingly—none of the Droid fonts are known to those Android browser.

Upvotes: 2

Related Questions