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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Single page application: from monolithic to modular

Replace manual task with API-Driven automation

gRPC rocks build your first gRPC service(part 1)

Here are my Top 3 No-Code Website Builders.

Linker error with Google Test

Alzira v Fuenlabrada (Live)”liveStream”

What is a code review?

The Future of Code Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Young

Aaron Young

More from Medium

How I manage my Python environments on a Mac with two simple tools

My VSCode setup for 2022

5 Useful VSCode Extensions to use in 2022

6 VS Code Quality of Life Extensions