Using Two Fonts in VS Code

24 Jan 2021

I give directions on using two fonts simultaneously in VS Code

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 a font like Operator Mono. I, therefore, found a better option. Using two coding fonts with ligatures.

The theme used (that has an option for the glow effect, which I enabled) is SynthWave ‘84

Please be aware, any time VS Code is updated to a new version or you update the CSS, repeat steps 8-10.

1. If not already installed, download and install desired fonts. I’m using JetBrains Monofor my main font and Victor Mono for italics. However, feel free to use whatever combo you’d like. A lot of people like Fira Code instead of JetBrains Mono
   1. Unzip the downloaded archive
   2. Install the font
      • Windows:
        1. Select all font files in the folder
        2. Right-click any of them
        3. Pick “Install” from the menu.
      • Mac:
        1. Select all font files in the folder and double-click.
        2. Click open at the prompt
        3. Click Install Font
      • Linux:
        1. Unpack fonts to ~/.local/share/fonts (or /usr/share/fonts, to install fonts system-wide)
        2. fc-cache -f -v
   3. Go to settings
   4. To set the desired main font
      1. In the settings panel, on the left, Navigate to Text Editor>Font
      2. Set ‘Font Family’ to your preferred font, for example, JetBrains Mono or Fira Code
   5. To enable ligatures
      1. In the settings panel, on the left, Navigate to Text Editor>Font
      2. Scroll down to ‘Font Ligatures’
      3. Click ‘edit in settings.json’
      4. Set ‘editor.fontLigatures’ to true if not already set
2. Install VSCode Extension: Custom CSS and JS Loader
3. Download this style.css (right-click the link and chose ‘save link as’) to your desktop or a preferred location; know the path to the file.
   • You can modify this CSS file to suit your needs to change the font weight, for example. If you want to, I suggest using the VS Code development tools by going to Help>Toggle Developer Tools
4. Main Font: If you are using a font other than JetBrains Mono
   1. Edit the styles.css
   2. Change JetBrains Mono to your preferred main font
5. Cursive Font: If you are using a font other than JetBrains Mono
   1. Edit the styles.css
   2. Change Victor Mono to your preferred cursive font
6. Update settings.json
   1. Add the following within the settings.json, without the comments & open or close brackets

      { // open of main json object
        "vscode_custom_css.imports": ["path-to-file"],
        "vscode_custom_css.policy": true
      } // close of main json object
      

      1. replace path-to-file with the correct path
         • Windows:
           • Example: file:///C:/Users/MyUserName/Desktop/styles.css
         • Mac or Linux
           • Example “file:///Users/MyUserName/Desktop/style.css”
7. Install the extension, Fix VSCode Checksums this will remove the error, “Your code installation appears to be corrupt”

8. 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.

9. In the command palette, run Fix Checksums: Apply
10. Restart VS Code by exiting, not reloading, VS Code and, start it back up.

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