How to get Cursive Fonts in VS Code 2021 (Without Operator Mono)

3 min readJun 28, 2018

Overview:

Install a font
Add 6 lines to a file
Restart VS Code
Customize to your heart’s content

There was a good article here https://medium.com/@zamamohammed/multiple-fonts-alternative-to-operator-mono-in-vscode-7745b52120a0

But it’s a little outdated so I thought I’d share the updated way to get your code looking something similar to this:

1. Download and install a cursive font.

I’m using Petit Formal Script. If you have a Mac with homebrew installed just run the following to install the font.

brew tap caskroom/fonts
brew cask install font-petit-formal-script

2. Open up your workbench.main.css file

On Mac you can find the file here:

/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench

On Windows you can find it here

Microsoft VS Code\resources\app\out\vs\workbench\

Once you’ve found the file add the following to the top of it, save it, and restart VS Code.

/* things with italics */
.mtki {
    font-family: Petit Formal Script !important;
    font-size: 0.7rem !important; 
    font-style: normal !important;
}

(If you’re not using Petit Formal Script then replace “Petit Formal Script” with the name of your font. You’ll probably also want to modify the “0.7rem” to be a size that fits your particular font.)

3. Open up your VS Code’s settings.json file

It’s time to force some parts of the code to be cursive.

As an example, add the following code anywhere in your settings.

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "name": "yellow cursive",
                "scope": [
                    //
                    // Add the scope of things you want to be
                    // yellow and cursive here
                    //
                    "support.constant.math",    // Math
                    "support.class.builtin.js",
                    "support.variable.dom.js", // "document"
                    "entity.name",             // "Object"
                    "entity.name.type.js",
                    "entity.name.type.class.js",
                    "support.function.magic.python",
                    "entity.other.attribute-name.html",
                ],
                "settings": {
                    "foreground": "#fec355", // change this COLOR
                    "fontStyle": "italic" // dont change this
                }
            },            {
                "name": "purple cursive",
                "scope": [
                    //
                    // Add the scope of things you want to be
                    // Purple and cursive here
                    //
                    "entity.other.attribute-name",
                    "entity.other.attribute-name.js.jsx",
                ],
                "settings": {
                    "foreground": "#c792eaff", // change this COLOR
                    "fontStyle": "italic" // dont change this
                }
           },           //
           // Add more cursive styles here
           // because you probably wont like just yellow and purple
           //
    ]
}

Once you restart VS Code, all the parts of the code that would be italic will instead be using the Petit Formal Script font (or whatever font you chose). Step 3 is just a way to manually force some of the code to use Italics.

4. How do I add scopes? What does that even mean?

If you want to make a particular kind of code cursive (for example “if statements”), open the command pallet (cmd/ctrl + shift + P) and type:

Developer: InspectTM Scopes

You can then click the code you want to be cursive (e.g. an if statement) and VS Code will tell you what scopes that part belongs to and what color it currently is. You can then copy and paste both the color and scope(s) into the code from step 3 to force it to be italicized (and therefore cursive). See here for more info on using “Developer: InspectTM Scopes” https://github.com/Microsoft/vscode/pull/29393

NOTES, Gotcha’s, and additional How-to’s:

1. When you reload VS Code it is going to tell you “Your stuff is corrupt”. This is because we modified the workbench.main.css file in step 2. If you want to get rid of the corruptness just undo the changes in step 2 or update VS Code.

2. Updates will most likely require you to repeat step 2 to keep the cursive style. There is a solution to this and its called https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css

3. Scopes are quirky, you’re probably going to have to fiddle with them a bit to get exactly what you want. VS Code has documentation on how to combine and exclude scopes which can be helpful.