2

A recent trend in CSS is to use a "system" font stack, which utilizes fonts designed for the user's operating system. Typically this looks something like this: 

body {
    font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
}

This type of font-stack has been adopted by Medium, Wordpress, Github, Bootstrap, Booking.com and many others. All of them include "Roboto" for Android version 4 & up. My question is, why? What would happen if "Roboto" was removed from this stack?

From my testing, even when you switch system fonts on an android device (in settings), the browsers default "sans-serif" font is always Roboto.

Is there any device or browser out there that does not set Roboto as the default sans-serif font when it's available? If not, why is Roboto included in these font stacks at all?

Jan Drewniak
  • 1,316
  • 15
  • 18

1 Answers1

2

... why is Roboto included in these font stacks at all?

The answer is quite simple: to make sure.

Here's how you should translate it:

If Roboto font family is installed on the system (or the browser is capable of applying it) from either own or loaded CSS @font-faces, it should be used when none of the afore mentioned font families resolve successfully.

Does it matter if any current device doesn't actually make it until Roboto because most resolve the same font earlier in the stack, since it's default system font? Not really. Because nobody knows what new device might get launched next year and that one might benefit from specifying Roboto in the stack.

Considering the possible impact on the page, font-family is really not the place where you should optimize your app. Besides, the font family list can be 1km long. Everything past the first font that resolves is ignored, so it's, actually quite cheap from a technical point of view.

tao
  • 82,996
  • 16
  • 114
  • 150