VSCode doesn't render variable font weights below 400 in Big Sur

[aaronbell]

Issue Type: Bug

In testing, I noted that, on macOS 11.4, VS Code will not render any variable instances less than 400. This issue can be repro'd with the latest version of JetBrains Mono, as well as other fonts (such as LeagueMonoVariable and Cascadia Code). See discussion here: JetBrains/JetBrainsMono#472

I've verified the issue also repros on https://vscode-web-test-playground.azurewebsites.net/

Interestingly, this issue does not repro on older versions of macOS such as Mojave, so it appears to be specific to the newer Big Sur OS.

It does appear that using the font-variation-settings CSS property (accessed via Developer Tools) instead works fine:

This bug might be related to #128097

Version: 1.58.1 (Universal)
Commit: 2aeda6b18e13c4f4f9edf6667158a6b8d408874b
Date: 2021-07-13T06:22:33.013Z
Electron: 12.0.13
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Darwin x64 20.5.0

[deepak1556]

This is tracked in upstream https://bugs.chromium.org/p/chromium/issues/detail?id=1100502

Originally reported in #100840 but since that issue is closed by the author will use this issue to track it.

[aaronbell]

@deepak1556 I’m not sure it is the same underlying issue as the ones you linked. Cascadia Code not JetBrians Mono do not contain embedded SVGs. Syntax colorization is working fine.

The issue here is in rendering of the font variation data via “font-weight”. In testing, the css property “font-variation-settings” renders correctly, but VS Code doesn’t use that property when setting font weight, even when the font is variable. So there’s definitely an upstream aspect of it but also fixes that VSCode can implement now to reduce the impact of this bug.

[spaceaardvark]

The linked upstream issue has been merged into another issue that, like @aaronbell said, does not sound like the root cause at all. Please re-evaluate when you can. Thank you!

[spaceaardvark]

Workaround: Uninstall any Cascadia fonts and then install the static TTF version. In VS Code, specify the desired weight in the font family, e.g., "Cascadia Code Light" instead of just "Cascadia Code". Leave the font weight set to "normal".

[deepak1556]

Merging to #128097