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

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