visual-studio-code

Is it possible to have multiple different font families based on syntax highlighting tokens/scopes in VS Code?


This is my VS Code's settings.json file how can I change it to have this font by considering this condition: specifically, use "Fira Code iScript" font for just below scope and "Cascadia Code" for everything except below scope.

"editor.fontFamily": "'Fira Code iScript', Cascadia Code, Consolas, 'Courier New', monospace",

"editor.tokenColorCustomizations": { 
    "textMateRules": [
        {
            "name": "purple cursive",
            "scope": [
                "keyword",
                "keywords",
                "entity.name.type.class", // class names//
                "javascript"
            ],
            "settings": {
                "foreground": "#a66cff",
                "fontStyle": "italic",
            }
        },
    ]
},

Solution

  • I don't think this is possible. As far as I know, at the time of this writing, VS Code doesn't have a builtin way to let you do this. I think that's fairly reasonable, since different font families have different glyph sizings, and one typically expects/wants sizings to be consistent when using monospace font families, which I'd expect mixing fonts to break. Though VS Code does make some types of exceptions, such as you can see in Configuring the font-style of VS Code's inlay-hints.

    Actually, there is a fairly popular feature request asking for this: Support fontName in textMateRules #36512, which I'd suggest that you give a thumbs up to show support for. You can also subscribe to it to get notified about discussion and progress. Please avoid making noisy comments there like ones that just consist of "+1" / "bump".

    There are hacks you can use like suggested in answers to Any way to change the font family of only commented code in VSCode? to be able to use a limited number of other fonts, where you create a custom font where you make the italicized glyphs (or some other combination of styling) be normal glyphs from another font family. Then you sacrifice being able to have italics, and use italics to get the other font instead.

    Note: rioV8 suggested doing CSS injections, but it's not clear to me how one would do this. The classnames VS Code uses in the editor are pretty atomic. From my cursory inspection using the devtools (use the Developer: Toggle Developer Tools in the command palette), the classnames VS Code uses are pretty "atomic"- I don't see classes for token scopes- just individual classes for colour, style, and the like. Ex. "mtk#" for a colour, and "mtki" for italics. I suppose that for some use-cases, that might be sufficient/satisfactor, such as was the case in Can I set a font family for italic font style and another font family for other font styles in VSCode?, but I don't think that works here, where the requirement is for specific tokens/scopes.