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.

Theoretically system-ui should be able to replace OS-specific values like the Mac OS prefixed -apple-system and 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:

font-family: system-ui;

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).