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

css google-chrome font-family
Anthony Kong picture Anthony Kong · Jul 14, 2013 · Viewed 148.9k times · Source

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

enter image description here

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?

Answer

Rafael Eyng picture Rafael Eyng · Sep 9, 2014

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.

Developer Tools > Elements > Computed > Rendered Fonts

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More