HTML Snippet To Be Styled By Font Not Installed On Computer Operating System Gets font-family Style From User Agent Default Styles Standard/Default Font Setting, Not By Inheritance From body Style Rule

Test CSS

body { font-family: Arial; }
.arial { font-family: Arial; }
.times-new-roman { font-family: "Times New Roman"; }
.bogus-font-not-installed { font-family: Bogusfontnotinstalled; }

Test HTML

<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>

Test

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.

Results

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

Learn Web Coding