Customize Visual Studio Code for Multiple Fonts and styles.

How I made it work :)

A few days ago I came upon an interesting article showcasing a mix of Operator Mono & Fira Code usage in Atom. For Atom users, here it is:

Operator Mono & Fira Code — The Best of Both Worlds

Operator Mono font is a beautifully designed font, with nice font ligatures (for enthusiasts), perfect for any IDE. If you afford, go for it.

Because I’m a Visual Studio Code fan, I was looking for a way to bring something similar, like multiple fonts, including a cursive one, in my favourite IDE.

After a little web search, I found an article describing what you have to do in order to activate multiple fonts in VSCode:

Multiple Fonts: Alternative to Operator Mono in VSCode

After following the steps, it still did not work. The problem was that newer VSCode versions are using other style names for HTML elements, CSS styles and Javascript keywords, different from the ones described in the article.

So I searched more and I found a gist that solved the problem, but I encountered the same kind of issues the author (Nick Taylor) was trying to solve: VSCode style names being updated in the newer version. Here is his gist:

https://gist.github.com/nickytonline/8086319bf5836797ee3dea802a77000d#file-customizing-vs-code-md

So how can you check if the style names being used in the tutorial are still correct in your VSCode version? The answer was at the end of the “Multiple Fonts: Alternative to Operator Mono in VSCode” tutorial.

Developer Tools

Because VS Code is build using Electron, we have access to Chrome DevTools window (the same as in Google Chrome browser). Use Help > Toggle Developer Tools to toggle it on and off.

As you can see in the screenshot above, using selection tool for the new keyword show us that it’s using .mtk7 style, one of the styles missing from Nicky’s gist above. For new VS Code versions, those are the ones you have to modify to apply your own customization.

If newer versions of VS Code stop rendering your preferred font or another attribute, open DevTools and check if the style name has changed.

How I have made it work

1. Install vscode-custom-css extension from
   https://github.com/be5invis/vscode-custom-css/blob/master/README.md. Without it, the statement “vscode_custom_css.imports” is not recognized as a valid one inside your personalized user settings.
2. Make sure vscode-custom-css is enabled after installation
   (use CTRL + SHIFT + P and then type “Enable Custom CSS and JS” as documented on their official page).
3. Make sure you have installed your preferred font (Brush Script MT in my case).
4. Copy the Styles.css from my fork of Nick Taylor’s gist to the Desktop (works with VS Code version 1.20.0).
5. Make sure the path to the Styles.css in your User Settings looks like this one (for Windows version of VSCode):
   “vscode_custom_css.imports”: [“file://C:/Users/daniel/Desktop/styles.css”]
6. Restart VS Code.
7. For any Styles.css update you have to eventually Disable and Enable vscode-custom-css extension with:

• CTRL + SHIFT + P
• Type “Disable Custom CSS and JS”
• Restart VSCode
• Type “Enable Custom CSS and JS”
• Restart VSCode

If the second font is still not working:

• Navigate to Help -> Toggle Developer Tools in VS Code.
• Use Select Inspector to highlight the keywords you wish to render using the new font and see what is their style (same as you do it in Chrome).
• Add the new style names (if any) in the custom Styles.css.
  For the version of VS Code that I’m using, I had to add .mtk7 style to make it work with the additional font.

Why investing such amount of effort in these styles? Because…

“It turns out that style matters in programming for the same reason that it matters in writing. It makes for better reading.” — Douglas Crockford

Enjoy your IDE. :)