font-family
Style From User Agent Default Styles Standard/Default Font Setting, Not By Inheritance From body
Style Rulebody { font-family: Arial; } .arial { font-family: Arial; } .times-new-roman { font-family: "Times New Roman"; } .bogus-font-not-installed { font-family: Bogusfontnotinstalled; }
<p>1 The quick brown fox jumps over the lazy dog.</p> <p class="arial">2 The quick brown fox jumps over the lazy dog.</p> <p class="times-new-roman">3 The quick brown fox jumps over the lazy dog.</p> <p class="bogus-font-not-installed">4 The quick brown fox jumps over the lazy dog.</p> <p><span class="bogus-font-not-installed">5 The quick brown fox jumps over the lazy dog.</span></p>
1 The quick brown fox jumps over the lazy dog.
2 The quick brown fox jumps over the lazy dog.
3 The quick brown fox jumps over the lazy dog.
4 The quick brown fox jumps over the lazy dog.
5 The quick brown fox jumps over the lazy dog.
1 Paragraph styled Arial by inheritance from body
style rule.
2 Paragraph classed styled Arial by .arial
style rule. A positive control for Arial text.
3 Paragraph classed styled Times New Roman by .times-new-roman
style rule. A positive control for Times New Roman text.
4 Paragraph classed to be styled Bogusfontnotinstalled by .bogus-font-not-installed
style rule, but Bogusfontnotinstalled font is not installed on computer operating system. Hence, from where does HTML snippet Test 4 (above) get font-family
style? If HTML snippet Test 4 (above) inherited font-family
style from the body
style rule, it would be styled Arial, which it is not. Instead, HTML snippet Test 4 (above), intended to be styled by a font not installed on the computer operating system, gets font-family
style from the user agent default styles Standard/Default font setting, which for Chrome 115 (see image below), Edge 115, Firefox 116, Opera 101, and Vivaldi 6.1 is set to Times New Roman. For Chrome, click menu (Customize and control Google Chrome) | Settings | Appearance | Customize fonts:
5 Paragraph with nested span
element classed to be styled Bogusfontnotinstalled by .bogus-font-not-installed
style rule, but Bogusfontnotinstalled font is not installed on computer operating system. Hence, from where does HTML snippet Test 5 (above) get font-family
style? Identical to Test 4 (above): from the user agent default styles Standard/Default font setting, which for Chrome 115 (see image above), Edge 115, Firefox 116, Opera 101, and Vivaldi 6.1 is set to Times New Roman.
Note: To prove HTML snippet Test 4 and 5 (above) get font-family
style from user agent default styles Standard/Default font setting, change the user agent default styles Standard/Default font setting from Arial to Webdings and notice the style of HTML snippet Test 4 and 5 (above) changes from Arial to Webdings. Then change the Standard/Default font setting back to Times New Roman.
Last reviewed/updated: 17 Aug 2023 | Published: 16 Aug 2023 | Status: Active