How do we know which fonts are installed on a user’s computer?

Question

How do we know which fonts are installed on a user’s computer?

Answer

Web developers don’t know which fonts are installed on a user’s computer! Instead, they often use web safe fonts which are installed on my operating systems or web fonts which are downloaded by the browser as the page gets rendered.

To ensure that your typography looks decent on every operating system, use web safe font stacks.

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;

I personally use custom-defined fonts to help me whenever I’m not sure if a user has a font installed or not. There are a few fonts that are safe to use, however.

There are a few options that will work no matter the user:

  • serif - displays the default serif font
  • sans-serif - displays the default sans-serif font
  • monospace - displays the default monospace font.

The above should be safe to use no matter the situation

Another way is to add several options:

font-family: Courier, "Times New Roman", Georgia, serif;

The code will try each font in order from left to right to see if the user has them. If it doesn’t have any, it will fall back to the default font on the user’s machine. That is why I would recommend using one of the three font options I mentioned above as the last option just in case.

1 Like

I’m much clearer on this now - it’s also expanded on, and explained in more detail, in the later lesson CSS Typography - Fallback Fonts.

Here are my conclusions and assumptions… please confirm, clarify, amplify or correct as necessary :grinning:


Question 1

Conclusion

  • The main three web-safe fonts are serif, sans-serif and monospace. The other two generic fonts, which could also be considered web safe, are cursive and fantasy

  • A web-safe font-stack refers to using a list of fallback fonts, the last one being one of the generic web-safe fonts (serif, sans-serif, monospace, fantasy or cursive). This is illustrated in @upsideumop’s post above:

Recommended web-safe font-stacks for various fonts can be found at https://www.cssfontstack.com/.


Question 2

Conclusion

The fonts highlighted in blue on https://www.cssfontstack.com can obviously be used individually as in the example above. However, they are not necessarily web safe when used individually, the compatibility %s indicating how web safe they actually are. Optimum “web-safeness” is achieved by using them as the first font in a recommended web-safe font-stack list with other fallback fonts.


Question 3

Conclusion

They can be used individually, as in these examples above, but, again, “web-safeness” is only achieved when they are used as part of a recommended font stack (either as the preferred font, or as a fallback).


Question 4

Conclusion

The CSS font-family property may specify a more general typeface, or a more specific font within that same broader typeface category. However, more finely-tuned font specifications which refer to size, weight and italicisation are selected using the font-size, font-weight and font-style properties.


Question 5

Conclusion

They can be used as either.

3 Likes