Share fonts across components

[bpasero]

From #65776 (comment)

Instead of components defining their own font rules, we should have one CSS class that components can pick to get a certain font style, e.g. one use case seems to be to use a monospace font in the workbench.

[bpasero]

@alexandrudima thoughts on this solution that is leveraging CSS variables: https://github.com/Microsoft/vscode/compare/ben/66201

?

Of course I still can tweak the font-family further by removing fonts that are specific to a OS. I think the variables work best over having to introduce a generic selector that is often hard to add for consumers.

The advantage of this approach is still that:

• we can reduce fonts by OS
• we can share the same consistent set of monospace font

Disadvantage:

• does not work in the standalone editor (e.g. found one usage in base)

[alexdima]

@bpasero This looks good to me. Maybe we can have both a CSS variable and a base class name called monaco-monospace. Then, usages from /base/ can adopt and add the class name monaco-monospace. Usages from other places can choose to use the class name monaco-monospace or the CSS variable, as they see fit.

[bpasero]

@alexandrudima thanks will do