Why chrome shows rendered font which is different to computed font family?

Question

I would like to know how chrome chooses which font to render? I am asking this because using Chrome Developer Tools I can see that the font family computed is different from the font family rendered and this is confusing. Similar questions on Stackoverflow was not of much help in this particular instance.

My computer font family looks like:

font-family: museo-sans, sans-serif, Futura;

Rendered font looks like:

Helvetica—473 glyphs

In this article, it is mentioned that chrome maps a rendered font to a the computed font listed. What does this mean exactly and why does it do that? Is there a way to control which font is rendered?

Answer 1

Same as any other browser: if it can't find the first font, it tries the next, and so on and so on until it runs out of rules. If no fonts match, then the font is inherited from the parent element, all the way up to the document level, where it'll just pick the browser's default font.

In this case, things are a bit weird, because the order you're showing is "a real font" followed by "a generic CSS class that always resolves, but without any guarantee as to which font that will be, just that it'll be a sans-serif font", followed by the real font "futura".

So Chrome will try museo, won't find it, sees the generic "sans-serif" and just picks a known sans-serif font for you. Usually that's something like Arial or Helvetica, but the CSS spec doesn't say anything about which font it has to be, specifically. It just needs to be a sans-serif font.

The weird part here is that the ordering you chose means that the "futura" at the end will never be checked. The browser will always find a suitable font once it hits serif, sans-serif, cursive, fantasy, or monospace