Using two fonts in VS Code: One for Emphasized Italics

The theme used (that has the glow effect option) is SynthWave ‘84

I love the code ligatures of JetBrains Mono and Fira Code, but I was disappointed at the subtle italics. I also didn’t want to shell out $199 for the font, Operator Mono. I, therefore, found a better option. Using two coding fonts with ligatures.

Please be aware, any time VS Code is updated to a new version or you update the CSS, repeat steps 16–18.

Due to Medium limitations of numbered lists, for better-formatted instructions, you can see the post on my personal site here

1. Download and install desired fonts. You can see my font installation directions in a post I wrote here. I’m using JetBrains Mono for my main font and Victor Mono for italics. However, feel free to use whatever combos you’d like. A lot of people like Fira Code instead of JetBrains Mono.
2. Open settings
3. In the settings panel, on the left, Navigate to Text Editor>Font
4. Scroll down to ‘Font Ligatures’
5. Click ‘edit in settings.json’
6. set ‘editor.fontLigatures’ to `true` if not already set
7. Install VSCode Extension: Custom CSS and JS Loader
8. Download this style.css (right-click the link and chose ‘save link as’) to your preferred location but I suggest: For windows, “C:\Users\MyUserName\.vscode\styles.css”. For Mac/Linux “/Users/MyUserName/.vscode/style.css”
9. Open style.css
10. If necessary, change JetBrains Mono to your preferred main font
11. If necessary, change Victor Mono to your preferred cursive font
12. In settings.json add: ”vscode_custom_css.policy”: true
13. In settings.json add: "vscode_custom_css.imports": ["path-to-file"] updating path-to-file in the next step
14. replace “path-to-file” with the correct path: For windows, it’ll look like “file:///C:/Users/MyUserName/.vscode/styles.css”. For Mac/Linux, it’ll look like “file:///Users/MyUserName/.vscode/style.css”
15. Install the extension, Fix VSCode Checksums, this will remove the error, “Your code installation appears to be corrupt”
16. In the command palette (view>command pallet), run ‘Reload Custom CSS and JS’ — You will get an error message saying that the installation is corrupt. This is to be expected and will be resolved in the next two steps.
17. Again, in the command palette, run ‘Fix Checksums: Apply’
18. Restart VS Code by exiting, not reloading, VS Code, and start it back up.

If you like this, Clap for me! If you implement this, what font combos are you using? Tell me below.

Attributions: I took some content from An alternative to Operator Mono font and Multiple Fonts: Alternative to Operator Mono in VSCode.