CODEWITHSUNDEEP
cssgoogle-chrome-devtools
Snowcrash
Snowcrash

Reputation: 86097

Google Chrome Dev Tools - can't work out font-family

I've got the following bit of text on a website:

caption

which, when I select in Dev Tools and filter by font-family, gives me the following:

Dev Tools snippet 1

and, further down:

enter image description here

Why are all the font-family attributes greyed out and how is this piece of text getting its font?

==== UPDATE

Just to clarify, I don't see a font attribute being set either. Shouldn't this element inherit from body? If so, why don't I see that in Dev Tools?

==== UPDATE 2

Looking in the Computed tab I see at the top:

Dev Tools Computed tab top

and at the bottom:

Dev Tools Computed tab bottom

I assume the font is Courier 13. But:

  1. what is the Show inherited properties checkbox?

  2. what are all the lines below "font-family: monospaced, serif"?

  3. and how is that Courier 13 font being chosen (from one of those Style sheet entries in point 2 above)?

Upvotes: 2

Views: 1093

Answers (2)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

In dev tools there is computed tab. This will show you the currently implemented values for all properties on the currently selected element.

enter image description here

You can scroll down in this tab to find what font-family being used. As for why it is not showing what font-family you are using in the filters, dunno.

Upvotes: 4

Alex
Alex

Reputation: 5214

maybe you have a font: attribute somewhere? it may contain the font family.

font: 15px arial, sans-serif;

Upvotes: 1

Related Questions