Monotype fonts on mobile devices
Note: As of 2024, this luckily seems to be an outdated issue.
While working on the rather minimalistic theme for this page, I decided to go with monotype font. I found something appealing about it. It worked fine on desktop computers, but smartphones and tablets used their default fonts (sans-serif in Android, and serif in iOS).
I haven't found out what is the origin of that, but it looks like mobile browsers ignore monotype value of font-family property. See the following snippet,
.some-element {
font-family: Arial, sans-serif;
}
If browser doesn't have Arial font (which happens sometimes on linuxes, for instance), it should use sans-serif. It's useful to define what kind of font we use, so browser won't go with serif font instead of Arial. There are five such groups:
serifsans-serifcursivefantasymonospace
Most often used are serif and sans-serif. I had a need to use monospace. And mobiles refused to cooperate. Googling didn't bring any resolution, so instead I went after default monotype fonts, and used them in my CSS. I don't like that I had to be that specific, as it means that there is no default fallback, but at least it looks now just as I wanted.
In case of Android, it's Google's Droid Sans Pro. iOS, for the other hand, has a few of them, and all of them can be seen here: output.jsbin.com/bisebi/4 (dead link).
Just one of those things not making sense that you have to remember in our line of work.