1

I want to style some HTML with a condensed font. I want to use built-in fonts, not webfonts. For Apple devices, I can just write font-family: AvenirNextCondensed-Medium, but on Android, declarations like font-family: "Roboto Condensed", font-family: Roboto-Condensed or font-family: RobotoCondensed don't work, even though Roboto Condensed is preinstalled on Android.

I also tried specifying Roboto and using font-stretch: condensed. No dice.

Is there any way to write my CSS so that Android devices use their built-in Roboto Condensed font?

Tomasz P. Szynalski
  • 377
  • 3
  • 8

1 Answers1

0

Answering my own question here:

You have to use the nonstandard sans-serif-condensed keyword, like so:

h1 { font-family: AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, sans-serif; }

Note that sans-serif-condensed has to come before sans-serif and any other font names recognized by Android. For example, if you put Arial before sans-serif-condensed, Android will just use Arial (or actually its substitute for it).

For other versions of Roboto (Thin, Light, Medium, etc.), the font names listed in this StackOverflow answer should probably work.

Tomasz P. Szynalski
  • 377
  • 3
  • 8