CSS Font Style Changes Not Working in Chrome - html

Question

Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox.
My website has the same problem, it does not pick up the CSS font settings (where normal is mentioned), hence I tested with the CSS test environment from W3Schools and the behavior is same.
CSS Snippet:
Working only in IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
Working in All Browsers: font-family: Arial, Helvetica, sans-serif;
Try in Chrome and IE to see difference.
body {
font-family: "Times New Roman", serif;
}
p.serif {
font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>
Below are the questions:
Could you clarify why the behavior difference between these two browsers?
How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove normal from all my CSS files or is there any better way to do it)?

Answer 1

Arguably invalid font-family declaration
If you open your browser's inspector (Ctrl+Shift+i in Chrome) you will see that the CSS rule
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
is not applied.
Per the CSS specifications, an invalid rule is ignored, and whatever would have been applied (backwards up the cascade) is applied instead or more accurately, not overruled.
The result is "Times New Roman" in this case - as seen in the "Computed Styles".
To set the font-style (-variant, -weight, -stretch or line-height (whichever you were trying to set to normal)) of text, we can either use exactly that, or use the font shorthand.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family...
(with caveats).
As for the difference between IE(and FF) and Chrome
Chrome recognises in the comma delimited assertion that sans-serif normal is not a font-family, whereas IE doesn't.
If you simplify the rule to:
p.sansserif {
font-family: sans-serif normal;
}
and view the result in IE, you'll see the <p> is in "Times New Roman" since, although IE accepts the declaration, it can't do anything sensible with it.
More from the specs:
...it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
Font family names that happen to be the same as a keyword value (‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’, and ‘cursive’) must be quoted to prevent confusion with the keywords with the same names.
So it is recommended that a font family called sans-serif normal be quoted as "sans-serif normal".
And if a font family is using the same name as a keyword it must be quoted.
Both Chrome and IE will accept Comic Sans MS or Times New Roman etc. with or without quotes, and apply them correctly.
Chrome rejects the unquoted use of the keyword sans-serif where it finds it combined with normal, but will accept both if quoted, although it won't be able to apply that font unless it can find one with that name.
IE accepts sans-serif normal as a possibly unquoted font family name, and this is arguably correct, since the keyword is only part of the presumed family name, rather than the whole thing.
Chrome, arguably incorrectly, rejects what it presumes is a malformed assertion.

Answer 2

or p.font{
font-family: font;
align-text: center;
}