15.3 Font family: the 'font-family' property

Chapter 15 - Fonts - 15.3 Font family: the 'font-family' property

Go to the relevant page of the specification.

c522-font-family-000
font-family
c527-font-000
font
c527-font-002
font
c527-font-003
font
c527-font-004
font
c527-font-005
font
c527-font-006
font
c527-font-007
font
c527-font-008
font
c527-font-009
font
c527-font-10
font
font-family-001 (ahem)
Font-family set to an installed font
The 'font-family' property set to and installed font renders the appropriate font.
font-family-002 (ahem)
Font-family set to the keyword 'serif'
The 'font-family' property set to 'serif' correctly renders the user agent's serif font.
font-family-003 (ahem)
Font-family set to the keyword 'sans-serif'
The 'font-family' property set to 'sans-serif' correctly renders the user agent's sans-serif font.
font-family-004 (ahem)
Font-family set to the keyword 'cursive'
The 'font-family' property set to 'cursive' correctly renders the user agent's cursive font.
font-family-005 (ahem)
Font-family set to the keyword 'fantasy'
The 'font-family' property set to 'fantasy' correctly renders the user agent's fantasy font.
font-family-006 (ahem)
Font-family set to the keyword 'monospace'
The 'font-family' property set to 'monospace' correctly renders the user agent's monospace font.
font-family-007 (ahem)
Font-family set to 'inherit'
The 'font-family' property set to 'inherit' inherits its value from the parent element's value.
font-family-008 (ahem, invalid)
font-family - unquoted font-family names with parentheses or curly braces
Unquoted font-family names must not contain unescaped parentheses or unescaped curly braces
font-family-applies-to-001 (ahem)
Font-family and 'display: inline' elements
The 'font-family' property applies to 'display: inline' elements.
font-family-applies-to-002 (ahem)
Font-family and 'display: block' elements
The 'font-family' property applies to 'display: block' elements.
font-family-applies-to-003 (ahem)
Font-family and 'display: list-item' elements
The 'font-family' property applies to 'display: list-item' elements.
font-family-applies-to-005 (ahem)
Font-family and 'display: inline-block' elements
The 'font-family' property applies to 'display: inline-block' elements.
font-family-applies-to-006 (ahem)
Font-family and 'display: table' elements
The 'font-family' property applies to 'display: table' elements.
font-family-applies-to-007 (ahem)
Font-family and 'display: inline-table' elements
The 'font-family' property applies to 'display: inline-table' elements.
font-family-applies-to-008 (ahem)
Font-family and 'display: table-row-group' elements
The 'font-family' property applies to 'display: table-row-group' elements.
font-family-applies-to-009 (ahem)
Font-family and 'display: table-header-group' elements
The 'font-family' property applies to 'display: table-header-group' elements.
font-family-applies-to-010 (ahem)
Font-family and 'display: table-footer-group' elements
The 'font-family' property applies to 'display: table-footer-group' elements.
font-family-applies-to-011 (ahem)
Font-family and 'display: table-row' elements
The 'font-family' property applies to 'display: table-row' elements.
font-family-applies-to-014 (ahem)
Font-family and 'display: table-cell' elements
The 'font-family' property applies to 'display: table-cell' elements.
font-family-applies-to-015 (ahem)
Font-family and 'display: table-caption' elements
The 'font-family' property applies to 'display: table-caption' elements.
font-family-applies-to-016 (ahem)
Font-family and 'display: none' elements
The 'font-family' property applies to 'display: none' elements.
font-family-applies-to-017 (ahem)
Font-family and 'display: inherit' elements
The 'font-family' property applies to 'display: inherit' elements.
font-family-invalid-characters-001 (ahem, invalid)
Invalid characters in font-family values
Invalid characters in font family names invalidate entire declaration.
font-family-invalid-characters-002 (ahem, invalid)
Invalid parenthesis and pair matching
Invalid characters in font family names.
font-family-invalid-characters-003 (ahem, invalid)
Invalid curly brackets and pair matching
Invalid characters in font family names.
font-family-invalid-characters-004 (ahem, invalid)
Invalid square brackets and pair matching
Invalid characters in font family names.
font-family-invalid-characters-005 (ahem, invalid)
Invalid quotes and pair matching
Invalid characters in font family names.
font-family-invalid-characters-006 (ahem, invalid)
Invalid single quotes and pair matching
Invalid characters in font family names.
font-family-name-001 (font)
font family name with no quotes
The 'font-family' property set to and installed font renders the appropriate font. Family name with no quotes.
font-family-name-002 (font)
font family name with no quotes, lowercase
The 'font-family' property set to and installed font renders the appropriate font. Family name with no quotes, lowercase.
font-family-name-003 (font)
font family name with no quotes, mixed case
The 'font-family' property set to and installed font renders the appropriate font. Family name with no quotes, mixed case.
font-family-name-004 (font)
quoted font family name with double quotes
The 'font-family' property set to and installed font renders the appropriate font. Family name with double quotes.
font-family-name-005 (font)
quoted font family name with single quotes
The 'font-family' property set to and installed font renders the appropriate font. Family name with single quotes.
font-family-name-006 (font)
unquoted font family name with extra whitespace
The 'font-family' property set to and installed font renders the appropriate font. Family name with extra whitespace should be condensed to a single space.
font-family-name-007 (font)
double quoted font family name with extra spaces should not match
The 'font-family' property set to and installed font renders the appropriate font. Family name with spaces in double quotes should not match, spaces are not reduced.
font-family-name-008 (font)
single quoted font family name with extra spaces should not match
The 'font-family' property set to and installed font renders the appropriate font. Family name with spaces in single quotes should not match, spaces are not reduced.
font-family-name-009 (font)
font family name with escaped hexcode characters
The 'font-family' property set to and installed font renders the appropriate font. Family name with escaped character.
font-family-name-010 (font)
localized font family name
The 'font-family' property set to and installed font renders the appropriate font. Localized family names should match.
font-family-name-011 (font)
quoted localized font family name
The 'font-family' property set to and installed font renders the appropriate font. Quoted localized family names should match.
font-family-name-012 (font)
font family name with escaped characters
The 'font-family' property set to and installed font renders the appropriate font. Family name with escaped characters.
font-family-name-013 (font)
font family name should not match font fullnames
The 'font-family' property set to and installed font renders the appropriate font. Fullname name should not match, only family names.
font-family-name-014 (font)
font family name should not match Postscript name
The 'font-family' property set to and installed font renders the appropriate font. Postscript name should not match, only family names.
font-family-name-015 (font)
font family name should not match localized font fullnames
The 'font-family' property set to and installed font renders the appropriate font. Localized fullname should not match.
font-family-name-016 (font)
font family name that includes numbers should match
Unquoted font family names with numbers should not be matched
font-family-name-017 (font)
when unquoted font family not found, should not use font family list of body element
When an unquoted font family name is not found font fallback occurs, the rule is not treated as invalid, the font-family setting of the enclosed body should not be used.
font-family-name-018 (font)
when quoted font family not found, should not use font family list of body element
When a quoted font family name is not found font fallback occurs, the rule is not treated as invalid, the font-family setting of the enclosed body should not be used.
font-family-name-019 (font)
when unquoted font family not found, should not use font family list of parent element
When an unquoted font family name is not found font fallback occurs, the rule is not treated as invalid, the font-family setting of the enclosed div should not be used.
font-family-name-020 (font)
when quoted font family not found, should not use font family list of parent element
When a quoted font family name is not found font fallback occurs, the rule is not treated as invalid, the font-family setting of the enclosed div should not be used.
font-family-name-021 (font, invalid)
mixed use of quotes in font family names is invalid syntax
Mixing quoted name with unquoted portion is invalid syntax, rule is dropped.
font-family-name-022 (font)
font shorthand parsing should not cause incorrect matching
Font shorthand parsing should not cause incorrect matching of font-family values
font-family-name-023 (font)
font family names that look like font shorthand
Font family names that appear similar to font shorthand should match to fonts with those names
font-family-name-024 (font)
system font names in font-family lists
System font names are only allowed with the font shorthand, not in font-family rules
font-family-rule-001
Font-family, fallback mechanism
Unknown or unavailable fonts fallback to the default font family. The default font family varies and depends on user agent.
font-family-rule-002 (font)
Font-family with white space
Font names containing any white space need to be quoted. It is also recognized if it is not quoted.
font-family-rule-003 (font)
Font family name with special character, quoted
Font names containing any special characters can be quoted. Otherwise the special character need to be escaped.
font-family-rule-004 (font)
Font family name same as keyword 'inherit'
Font family named 'inherit' needs to be quoted to avoid conflict with keyword 'inherit'.
font-family-rule-005 (dom)
Font family unknown character glyph matching
Glyphs that are missing render as the missing glyph character and still report their initial character location, not the missing glyph location.
font-family-rule-006 (ahem)
Font family generic name cannot be quoted
Generic font family name is not recognized if quoted.
font-family-rule-007 (font)
Font family name with special characters, escaped
Font family name having special characters needs to escape special character. Otherwise the font family name need to be quoted.
font-family-rule-009 (font)
Font name with multiple white space characters
Multiple white spaces inside quoted font-family name cannot be collapsed to single white space.
font-family-rule-010 (font)
Font name same as reserved keyword 'initial'
Font named 'initial' needs to be quoted to avoid conflict with reserved keyword 'initial'.
font-family-rule-011 (font)
Font name same as reserved keyword 'default'
Font named 'default' needs to be quoted to avoid conflict with reserved keyword 'default'.
font-family-rule-012 (font)
Font name same as keyword 'serif'
Font named 'serif' needs to be quoted to avoid conflict with generic 'font-family' 'serif'.
font-family-rule-013 (font)
Font name same as keyword 'sans-serif'
Font named 'sans-serif' needs to be quoted to avoid conflict with generic 'font-family' 'sans-serif'.
font-family-rule-014 (font)
Font name same as keyword 'cursive'
Font named 'cursive' needs to be quoted to avoid conflict with generic 'font-family' 'cursive'.
font-family-rule-015 (font)
Font name same as keyword 'fantasy'
Font named 'fantasy' needs to be quoted to avoid conflict with generic 'font-family' 'fantasy'.
font-family-rule-016 (font)
Font name same as keyword 'monospace'
Font named 'monospace' need to be quoted to avoid conflict with generic 'font-family' 'monospace'.
font-family-rule-017 (font)
Font-family multiple white space characters in font name
Multiple (1 or many) white spaces before and after an unquoted font-family name are ignored. Multiple (more than 1) white spaces inside an unquoted font name get converted to single white space.
font-family-valid-characters-001 (ahem)
Valid characters in font-family values
Valid characters in font family names.
font-family-valid-characters-002 (ahem)
Valid numbers in font-family values
Font family names must be identifiers.