Why does chrome show a displayed font that is different from the computed font family?

Question

I would like to know how chrome chooses which font to display? I ask about this because, using the Chrome developer tools, I see that the computed font family is different from the displayed font family, and this is confusing. Similar questions in Stackoverflow did not help in this particular case.

My computer font family looks like this:

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

The highlighted font looks like this:

 Helvetica—473 glyphs 

This article says chrome maps a displayed font into a computed font. What does it mean and why does it do it? Is there a way to control which font is displayed?

Answer 1

Like any other browser: if it cannot find the first font, it tries to execute the next one and so on and so forth until the rules expire. If the fonts do not match, the font is inherited from the parent element, down to the document level, where it simply selects the default browser font.

In this case, everything is a bit strange, because the order you show is a “real font” followed by a “common CSS class that is always resolved, but without any guarantees as to what font will be, just that it there will be a sans-serif font, ”followed by the actual“ futura ”font.

So, Chrome will try museo, not find it, see the general "sans-serif" and just pick the famous sans-serif font for you. Usually this is something like Arial or Helvetica, but the CSS specification says nothing about what font it should be, in particular. It just has to be a sans serif font.

The strange part here is that the order you choose means that the “futur” at the end will never be checked. The browser will always find a suitable font when it reaches serif , sans-serif , cursive , fantasy or monospace