Why is font-family not properly cascading in this button?

6
votes

Here is the link:

http://jsfiddle.net/LDEt6/

The first CSS rule sets the font-family as 'Helvetica Neue', Helvetica, Arial, sans-serif; and all other font settings in the CSS below simply state 'inherit'.. in Chrome 21 however I am getting "Times" as the computed font-family and in Firefox I am getting 'serif'. What am I missing?

Thanks!

2
cssfonts
FYI, initial is supposed to exist on its own, just like inherit, so you can't have initial initial for your background properties. – BoltClock

2 Answers

8
votes

First we have:

body {
     font-family : 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Cool, thats fine. But then we have:

html, body, input, button, <snipped...> {
     font: inherit;
}

So font get overwritten by this rule which also applies to body, it is now inherit.

So what does inherit do? It says "use the styling property assigned to my parent element". In this case, the parent of <body> element is <html> which has no parent. So no specified font family at all at the root, so nothing can inherit.

What inherit does not do, is use the previously defined value for that element. It inherits from the parents, not the previous style that would have applied. inherit is about HTML structure, not CSS structure.

In the end, you set the entire universe to inherit a font from its parent, including all parents. So you never actually find a parent with a real set font. Instead the browser applies its default font, just so it can render something.

If you move your body font rule after to giant reset rule there, it should start working. Fonts will then inherit all the way up to the body tag, which has a real font now.

0
votes

Here: http://jsfiddle.net/LDEt6/6/

In the large clump of selectors you redeclare the body as font: inherit.