How to use SF Mono in VS Code?

Question

I have encountered some issues for setting up SF Mono font in VS Code.

Method 1

Add the following configuration in settings.json

"editor.fontFamily": "SF Mono"

The font seems to be bold, and changing "editor.fontWeight" to 100 doesn't help.

Method 2

"editor.fontFamily": "SFMono-Regular"

The texts have regular font weights now, but the comment is still bold.

Method 3

Try to configure the comment text separately.

"editor.fontFamily": "SFMono-Regular",
"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
            "fontStyle": "normal"
        }
      }
    ]
}

It seems configuring comment texts to normal gives them regular font weight.

My question is how to have regular SF Mono weights while having italic comments?

Answer 1

To use SF Mono in VS Code:

1. Remove your local version of SF Mono if it appears in Font Book.
2. Download the most recent version of SF Mono from Apple here: https://developer.apple.com/fonts/
3. In VS Code's settings set SF Mono as your preferred font. My config is SF Mono, Menlo, Monaco, 'Courier New', monospace
4. Restart VS Code

SF Mono should display properly, with the correct weight italics.