machineghost machineghost - 3 months ago 18
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
Arial
and
sans-serif
, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my
font-family
list.

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
font-family
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
Arial
or
sans-serif
font ... but even so, I thought browsers provided (at least) a basic
sans-serif
font, no matter what the OS? Is that incorrect?

Answer

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.