Learn CSS - CSS Visual Rules - Font Family recommends https://www.cssfontstack.com/ as a reference for web-safe fonts. This website refers to web safe font-stacks, and my confusion is over whether there is a difference between a web-safe font and a web safe font-stack. Or, for a font to be web safe, does that mean it needs to be coded in CSS as part of a font stack?
For example, as well as being the first font-family
value in a font-stack list, can EACH of the fonts highlighted in blue on https://www.cssfontstack.com/ also be used individually as web-safe fonts, and coded in CSS as stand-alone font-family
values? e.g.
font-family: "Arial Black";
Do the compatibility %s (stated on the website) also refer to when these fonts are used individually (as in the example above), or only as part of the corresponding font stack?
(e.g. https://www.cssfontstack.com/Arial-Black)
Similarly, can EACH of the fonts listed in the different font stacks also be used individually as web-safe fonts? e.g. based on the Arial Black font-stack from the same link in the paragraph above:
font-family: "Arial Bold";
font-family: Gadget;
I am also confused by the fact that both Times
and "Times New Roman"
are considered to be valid font-family
values. From what I have read about the difference between typefaces and fonts, isn’t the font-family
here Times
, and "Times New Roman"
a font included within that font-family
?
(Arial
, "Arial Black"
and "Arial Bold"
are another example of this).
Lastly, are the 5 generic fonts (serif
, sans-serif
, monospace
, cursive
and fantasy
) also each considered a separate font-family
which can be used individually as a web-safe font, and coded in CSS as a stand-alone font-family
value? e.g.
font-family: sans-serif;
Or can they only be used as the final value in a font-stack list, to make it super web-safe? e.g.
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;