Especially in the last year I've heard more and more often designers and developers recommending to set font-family as system-ui in you css.
Whether you're defaulting to the system fonts or just setting a fallback for your custom webfont, using system-ui has its shortcomings that you need to know before considering using in production environments.
system-ui should be able to replace OS-specific values like the Mac OS prefixed
BlinkMacSystemFont and specific OS fonts like Windows'
Segoe UI, Linux's
Oxygen Sans, GNOME's
Cantarell for example.
So instead of this:
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
we could write this:
It's beautiful! But unfortunately it won't work in the second most used browser in the world, Firefox.
As of July 2019, Firefox still doesn't support system-ui as value for the font-family property, so Firefox users will see a default serif font (Times on Mac OS and Times New Roman on Windows).