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?
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";
I am also confused by the fact that both
"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
"Times New Roman" a font included within that
"Arial Black" and
"Arial Bold" are another example of this).
Lastly, are the 5 generic fonts (
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.
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;