I don't get it. Why not just use "serif", "sans-serif" and "monospace"? What's the value of specifying specific fonts such as "Charter" or "Dejavu Sans"?
I'm a big proponent of doing exactly what you say, however, for some companies the text rendering is an essential part of their branding (take Discord as an example). In those cases you might not want to load webfonts to reduce reflow, bandwith usage, etc. However using sans-serif or serif will generate very different results in each platform, these font stacks are optimized to look almost the same on each platform. The GitHub has much better information about this than the website itself since it has screenshots of the fonts instead of relying on your browser rendering them.
In practice though using system-ui, sans-serif, serif and monospace is truly the best answer. I'll override any websites fonts with mine anyways so I don't bother with criticizing websites that use bloated web fonts or font stacks unnecessarily. :D
In practice though using system-ui, sans-serif, serif and monospace is truly the best answer. I'll override any websites fonts with mine anyways so I don't bother with criticizing websites that use bloated web fonts or font stacks unnecessarily. :D