Define font-family fallback in design tokens package

[germain-gg]

To fix matrix-org/matrix-react-sdk#11170

[sandhose]

Oh, I opened an issue for this yesterday without looking for existing ones

• Web font stack should have nice fallbacks #255

The current fonts (sans and mono) are set to a single font (Inter and Inconsolata), which we make the client download.
We include those fonts with a font-display: swap property, which makes the UI display not block on the font to display stuff (good), but because they are the only font in the stack, the initial font is serif (not good).

For example, in MAS, we get this UI while the font gets loaded:

Initial load	After few ms

We should at least have sans-serif in the font stack, but even better would be:

• Inter, ui-sans-serif, system-ui, sans-serif for the sans font
• Inconsolata, ui-monospace, monospace for the mono font

We could also go further and use the font stacks described in this article