all css font-family definitions in firefox inspector striked through

Question

I'm using the Inspect Element function of Firefox to determine which font-family is used on a certain element. In my actual case I can only find font-family definitions which are stroked through in the rules pane. I thought they have been overwritten in a higher position from another CSS rule. But there is no definition for font-family which is not stroked through all over the rules pane. The up-most one shows like:

.helvetica-neue-websave {
     font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
}

On the other hand when I look at the font pane of the inspector I see that the font-family for my element is Helvetica Neue Condensed Bold but I can not find out, where it was defined.

edit: the computed pane states it uses HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif but it is definitely the condensed version.

So, may anyone can guide me how I can find out where this font-family definition is placed??? It is not in the HTML itself and in none of the CSS files which I see in the rules pane. Hope my question was clear and sorry for my english

chances are the font which you mentioned in css is not recognized by browser/system and when it happens the browser replaces the missing font with the closest possible match — RRR
It can be a pain sometimes. On Chrome there is a "Computed" tab which shows actual applied rules. In your case it might be overridden by some parent element, not necessarily the element itself, that's why you might not be seeing it set in your element. — Muhammed
also FF has this computed tab which shows that is uses "HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif", but that's not true, cause it uses the "condensed" version. So somewhere the "Helvetica Neue Condensed Bold" must be defined (since it is not a websafe one I guess)??? — Tom
PS: I also looked at all parent elements but I could not find an declaration for that condensed font type... — Tom

Mike 'Pomax' Kamermans Mike 'Pomax' Kamermans · Accepted Answer · 2016-03-02T16:40:17

Do you see that the font-family is "Helvetica Neue Condensed Bold" or do you see that the font resource used for the font-family is "Helvetica Neue Condensed Bold"? Because those are two completely different things. It sounds like the latter, in which case: CSS asks the browser for "a font" based on the names provided.

The browser checks if it has any explicit resources bound (using @font-face) and if not, it asks the OS for a font that matches the name CSS specified.
If the OS can't find them, CSS falls back to the next font and tries again. Steps 1 and 2 repeat until we run out of resources.

At any point, the browser or OS are allowed to go "yeah I found something" provided the name a resource they know of matches "well enough", so if you ask for Helvetica Neue, and the OS ends up being asked for that, then it can go "oh yeah I have a Helvetica Neue here" and then give the browser Helvetica Neue Condensed. That is 100% acceptable: it's one of the many legal matches for "Helvetica Neue" because that's the actual family name, and "Regular", "Condensed", "Thin", "Oblique", etc. are not.

If that isn't acceptable to you as develop, then your CSS needs to become more precise: either start only accepting 'Helvetica Neue Regular', which is a bad plan, or load an actual font so that you properly control which font will get used, without the OS getting consulted. Especially for a font that only Mac users will have installed (unix, linux, and windows users all do not: and would need to buy it first), and so is a guaranteed breaking on other platforms.

Create an @font-face rule with the font you want, with a font-family like ContentFont (so that if you want a different font later, all you have to do is replace the src binding, without changing any content CSS) and then point that to a true .woff font resource (without using local() because again, no guarantee you'll get what you ask for, it might resolve "good enough" while to human eyes being absolutely wrong)

all css font-family definitions in firefox inspector striked through

1 Answers