Any way to change the font family of only commented code in VSCode?

Question

I've come across this in user settings "editor.fontFamily": "Consolas, 'Courier New', monospace", but is there any way to change only the font of comments? I've seen people have semi cursive comments in other editors and I'd like to be able to replicate something similar.

I had the same issue and found a loophole that worked great https://stackoverflow.com/a/67693674/15526565 — Jeff, May 25 '21 at 18:32
@Jeff Oh this is perfect! Thanks for that. Love having an stark contrast between code and comments so this will definitely come in handy. The fact that it's endlessly customizable is awesome too. — Ryan Mcguinn, Jan 02 '23 at 02:08

score 15 · Accepted Answer · answered Feb 17 '18 at 10:13

You can change the font style with the editor.tokenColorCustomizations setting:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

I don't think there's a way to change the font family right now. The setting only allows customizing fontStyle and foreground (text color). There's an open feature request for adding support for it though:

Support fontName in textMateRules (#36512)

Jeff · Answer 2 · 2021-05-25T19:05:53.403

I had the same issue and it seems you can only make comments italic but cannot change to a separate font. I ended up combining a regular and italic font I liked into a font family which worked.

Download a font editor (FontForge) and create a font family of your own (ex: Custom Font) by changing a regular font you like to Custom Font Regular.ttf and an italic font you like to Custom Font Italic.ttf. Just keep the family name the same.

FontForge Example:

Open your desired fonts separately in FontForge.
From Element -> Font Info just change
1. "Fontname" : CustomFont-Regular, CustomFont-Italic
2. "Family Name" : Custom Font (keep these the same for both)
3. "Name For Humans" : Custom Font Regular, Custom Font Italic
4. Don't touch anything else and hit OK.
5. Accept if/when it asks to change ID
6. File -> Generate Font as True Type
7. Install your newly named ttf fonts
8. Then add your new family to vs code. (If you're following along that's "Custom Font")

Pretty straightforward and works great in VS Code. Hope this helps somebody

score 2 · Answer 3 · answered Jul 14 '23 at 14:35

This answer is a detailed version of Jeff's answer and Grama's answer with what I have found so far.

At the end, you should get a VSCode properly set up looking like this:

As of now (2023-07-23), VSCode doesn't support natively the use of a different font for comments. Only a single font can be defined in VSCode settings.json. I would recommend you to let a message on the VSCode GitHub feature request to show devs that you would like this feature here.

That said, you can change the color and style (e.g., italics) of comments in VS Code by editing your color theme or by using an extension, but changing the font is not natively supported. But modifying Visual Studio Code's internal files or styles to change the font of comments is generally not recommended, as these modifications might be overwritten when you update VS Code. Furthermore, tampering with the application's internal files might cause unexpected behavior or even break the application.

So, if you want to keep things clean, I would recommend to use the italic trick. Make comments be italic:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

Then, the trick is to combine the two fonts you want to use with a tool like FontForge and then set this font into VSCode

"editor.fontFamily": "'CustomJetBrainsMonoNFFantasqueSansMNF', monospace",
"editor.fontLigatures": true, // only if your font supports it

To combine the two fonts you want to use, follow Jeff's answer. In the example below, I have combined 2 Nerd fonts supporting ligatures (you can find and install this font directly from GitHub:

Just open the two selected fonts with FontForge and change their name and description. Export the italic and regular font with common name to you ~/.fonts/ folder and apply changes with fc-cache -fv`. Make sure to close and reopen all windows of VSCode for the new fonts to be loaded.

Happy coding!

Any way to change the font family of only commented code in VSCode?

3 Answers3

Linked