0

I was inspecting CSS on https://status.slack.com/ and noticed that the font in the Computed tab in Chrome was displaying font-family: Lato, sans-serif.

I would have expected that once computed, we would know which font was in effect. So why does the Computed tab show two fonts Lato and sans-serif, instead of just whichever one is currently in effect?

Which font is actually in effect?

Styles tab:

enter image description here

Computed tab:

enter image description here

Community
  • 1
  • 1
Zabba
  • 64,285
  • 47
  • 179
  • 207

3 Answers3

2

I found that Chrome now shows "Rendered Fonts" at the bottom of the Computed tab. In the past, it used to show it in the font-family property in the Computed tab

Turns out Firefox used to support the Fonts sub-tab in the Inspector tab, but that has been removed in Feb 2016.

Zabba
  • 64,285
  • 47
  • 179
  • 207
  • Even browser vendors can't make up their minds what "computed value" means. No wonder you got them mixed up. In CSS, the computed value should be (and is) the entire font-stack. After all, that's the whole point of a font-stack - to provide fallbacks in cases where either an entire family is not available, or a family doesn't provide glyphs for certain code-points; CSS doesn't know at computed-value time which font resources are available. It is not remotely the same thing as "which font is ultimately rendered" or indeed, "which *fonts are* (in plural) ultimately rendered". – BoltClock Jun 11 '16 at 07:51
  • 1
    The Fonts panel hasn't been removed from Firefox; it's simply been hidden behind an about:config flag, and still works when you re-enable it. – BoltClock Jun 11 '16 at 07:56
  • Ah. So the Computed value means the final CSS property value determined after all the cascading is done. It doesn't refer to the final rendered font. Got it! (Maybe that is why Chrome moved it to a separate section at the bottom of the Compted tab - to avoid that confusion of the ultimately-rendered font with the Computed value) – Zabba Jun 11 '16 at 08:05
0

All of the font-family doesn't work in all the browsers. So, what it does is giving multiple font family, and it starts from the first font and if it doesn't work means it goes to the next font-family.

In your case, If Lato doesn't supported by the browser, then it will go to the next font-family (i.e) sans-serif.

The last fonts are common, that are supported by all browsers like sans-serif and serif

For more reference, check This

Hope it helps :)

enter image description here

Arun AK
  • 4,353
  • 2
  • 23
  • 46
  • So "computed" doesn't mean "the font currently in effect" ? How can I find out for sure which font is currently in effect? – Zabba Jun 11 '16 at 06:50
  • Actually, "computed" means the font currently used only. Lets make it simple. --------- Now your site font is in 'Lato' font family only, but if your current browser doesn't supported it, then it will jump to "sans-serif". Its like a backup, if the specified font is not supported, it will jump to the next default font family. – Arun AK Jun 11 '16 at 07:10
  • Yes, I understand the font fallback, but which one of those two fonts is the one currently applied? – Zabba Jun 11 '16 at 07:11
  • you can detect using http://www.lalit.org/lab/javascript-css-font-detect/. You can refer http://stackoverflow.com/questions/845/detecting-which-font-was-used-in-a-web-page – Arun AK Jun 11 '16 at 07:14
  • So in the example in my question, which font is ultimately rendered? Lato or sans-serif? – Zabba Jun 11 '16 at 07:21
  • Its "Lato". I attached the screenshot – Arun AK Jun 11 '16 at 07:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114406/discussion-between-zabba-and-thinker). – Zabba Jun 11 '16 at 07:33
0

Font-family uses the first font defined. However, because some fonts are not available on the client's computer, CSS allows for many fonts for the clients to "fallback" on.

For example, font-family: Arial, Calibri, sans-serif; tells the browser to use Arial if possible. If it's not available, use Calibri. If both are not available, use the browser's default sans-serif font.

If you want to force a browser to have a font, you can use @font-face.

  • So in the example in my question, which font is ultimately rendered? Lato or sans-serif? – Zabba Jun 11 '16 at 07:21
  • In this case, Lato if the user's computer supports it since its the first font chosen. –  Jun 30 '16 at 12:30