machineghost machineghost - 11 months ago 71
CSS Question

CSS: Why Is Chrome (on Linux) Ignoring My Font-Family?

When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:

font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif

But if I scroll down further (to the bottom of the "Computed" tab) I see:

Rendered Fonts
Liberation Sans—Local file(11 glyphs)

Since my (Linux) OS must have
, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my

I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my
list defined (and being applied) to my element ... it just ignores it.

Can anyone explain this mystery?

EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an
font ... but even so, I thought browsers provided (at least) a basic
font, no matter what the OS? Is that incorrect?

Answer Source

serif, sans-serif, and monospace are not actual fonts installed on the system, but are rather identifiers for the browser's default font of choice representing each of those cases on the current operating system.

So, Chrome's sans-serif font of choice on Linux (Mint) must be Liberation Sans.

...or in your own words:

Even though your font-family says sans-serif, the browser will tell you the name of the font it used to provide sans-serif; it won't actually say sans-serif.