font-family is inherit. How to find out the font-family in chrome developer pane?

Question

In the Chrome's developer pane, I can see these css settings of an element.

As far as I can see, every single font-family value is inherit.

How can I find what is the actual value of the font family? And how can I trace the definition of the root font-family value come from the inheritance hierarchy?

Gurevich

If any property for the html selector is inherit, that just means to use the user preferences (from the settings). The value will only change after you give something a value explicitly in a stylesheet. Or did you mean something else? – Neuralgia

Answer 1

Developer Tools > Elements > Computed > Rendered Fonts

The picture you attached to your question shows the Style tab. If you change to the next tab, Computed, you can check the Rendered Fonts, that shows the actual font-family rendered.

Vandyke

Answer 2

The inherit value, when used, means that the value of the property is set to the value of the same property of the parent element. For the root element (in HTML documents, for the html element) there is no parent element; by definition, the value used is the initial value of the property. The initial value is defined for each property in CSS specifications.

The font-family property is special in the sense that the initial value is not fixed in the specification but defined to be browser-dependent. This means that the browser’s default font family is used. This value can be set by the user.

If there is a continuous chain of elements (in the sense of parent-child relationships) from the root element to the current element, all with font-family set to inherit or not set at all in any style sheet (which also causes inheritance), then the font is the browser default.

This is rather uninteresting, though. If you don’t set fonts at all, browsers defaults will be used. Your real problem might be different – you seem to be looking at the part of style sheets that constitute a browser style sheet. There are probably other, more interesting style sheets that affect the situation.

Steinman

Answer 3

Your browser's default font-family will be inherited for that case.

You can check the browser default font in chrome: Settings > Web content > Customize fonts...

Brandeebranden

Answer 4

I think op wants to know what the font that is used on a webpage is, and hoped that info might be findable in the 'inspect' pane.

Try adding the Whatfont Chrome extension.

Clot