Use Tahoma font as a fallback for system-ui

[jhasse]

Workaround for:
https://bugs.chromium.org/p/chromium/issues/detail?id=724393

[mention-bot]

@jhasse, thanks for your PR! By analyzing the history of the files in this pull request, we identified @bpasero and @jrieken to be potential reviewers.

[bpasero]

@jhasse isn't this the wrong fix? In #25570 (comment) @manu-silicon is reporting that our change to .monaco-shell { font-family: system-ui; } is causing his Windows to use Times New Roman as font. Previously we used to have .monaco-shell { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif; } which did not exhibit this behaviour. While Segoe was not loaded, another fallback kicked in (probably sans-serif).

With your change now you set Tahoma on all os to be used as fallback font if system-ui fails to load. Do we know this is a good fallback font on all platforms?

I suggest to just use this way to ensure we have good fallback behviour that matches previous versions:

.monaco-shell { font-family: system-ui, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif; }

This would be the same we now use for the monaco editor (https://github.com/Microsoft/vscode/pull/25570/files#diff-57a39c28acca4e4e2bcedc18dc0b7f3cR9).

@alexandrudima @Tyriar for opinions

[jhasse]

Yes you're right, this doesn't exactly restore the previous behaviour. But the previous behaviour was also buggy, as it didn't use Tahoma, although @manu-silicon had specified it in the Registry.

While Segoe was not loaded, another fallback kicked in (probably sans-serif).

I think it was Segoe WPC, as sans-serif would be Arial and the font in his screenshot looks different.

Do we know this is a good fallback font on all platforms?

Windows is the only platform with a known bug of system-ui failing to load so far.

.monaco-shell { font-family: system-ui, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif; }

As long as system-ui is in front of "Ubuntu" I'm okay with it ;) But this might result in system-ui bugs not being immediately apparent, as the fallbacks are good-enough, while Times New Roman always looks out of place.

[bpasero]

@jhasse we could always add Tahoma at the end of the list before the sans-serif rule right?

[jhasse]

For manu-silicon's case it would still use Segoe WPC then I guess.

[bpasero]

@jhasse what kind of issue does that expose if Segoe WPC is used?

[jhasse]

@jhasse what kind of issue does that expose if Segoe WPC is used?

It's the wrong font, just as Times New Roman would be.

[bpasero]

I just ran a test on my Windows 10 and it looks like none of the fonts (other than system-ui) are actually being picked up that we have specified. The only font that makes a difference is sans-serif at the end. Both sans-serif and system-ui seem to use the same font after all. The font is definitely not Tahoma for me.

If we add Tahoma anywhere before sans-serif and Chrome fails to pick up system-ui, we would end up using Tahoma on Windows 10 which looks wrong. As such -1 for adding it and +1 for doing what I suggested in #26912 (comment)

[jhasse]

The only font that makes a difference is sans-serif at the end.

With or without system-ui before?

[bpasero]

With or without system-ui before?

All of these cause the same font to show up for me:

• font-family: system-ui, sans-serif
• font-family: system-ui
• font-family: sans-serif

[manu-st]

Note that now I know how to fix system-ui on my system to use the font I want, it is not so much of an issue. I kept using Tahoma on Windows as I do not like Segoe UI, but the way I bypassed it via FontSubstitutes was not perfect until I found a way to properly define system-ui in the Windows registry key for WindowsMetrics (see https://superuser.com/questions/1143356/cant-completely-eliminate-font-smoothing-in-window-10-with-font-substitution). I would personaly keep system-ui as is if it works on all platforms and if a user (like me) doesn't get his font right on Windows, it is easy to work around.

[Tyriar]

Adding the previous fallback chain after system-ui is certainly the safest route in case there are other issues with system-ui.

[bpasero]

@jhasse let me know if you want to make this change

[jhasse]

Done :)

[bpasero]

@jhasse thanks 👍

[Tyriar]

Thanks @jhasse 👌