Website Logo

November 10, 2023 ~ 2 min read

Monaspace VS-Code install


To install the Monaspace font on macOS with VS Code and enable multifont syntax highlighting with the CSS JS Loader extension, you can follow these steps:

  1. Download and install the Monaspace font:

  2. Configure VS Code

    • Install the Custom CSS and JS Loader plugin.

    • Set font to one of the below options: Monaspace Neon Var, Monaspace Argon Var, Monaspace Xeon Var, Monaspace Radon Var, or Monaspace Krypton Var.

      • You will find this option under Editor: Font Family in the user preferences

    • Enable font ligatures in the settings.json with below snippet:

    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'calt', 'dlig'",
    • Enable the custom CSS file with this in the settings.json modifying the file path for Windows / MacOS / Linux if needed:

    "vscode_custom_css.imports": [
      "file:///Users/{{user}}/.vscode/style.css", // for mac (remove if not mac)
      "file://\C\Users\{{user}}\vscode/style.css" // for windows (remove if not windows)
      "file:///home/{{user}}/.vscode/style.css" // for linux (remove if not windows)
  3. Create custom CSS file at the path you specified above.

    • Depending on your VS Code version, the class names might be different, so you may need to use the developer tools to find the correct one.

    • The code that work for me on VS Code version: 1.84.2 (Universal) commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e are here:

    /* Comment Class */
    .mtk4 {
    	font-family: "Monaspace Radon Var";
    	font-weight: 500;
    /* Copilot Classes */
    .ghost-text-decoration {
    	font-family: 'Monaspace Krypton Var';
    	font-weight: 200;
    .ghost-text-decoration-preview {
    	font-family: 'Monaspace Krypton Var';
    	font-weight: 200;
    • Thanks to @fspoettel on GitHub for this trick to get the copilot classes when in dev mode:

      • You can inspect transient DOM elements by halting the app with a debugger after a delay with a console statement like:

        setTimeout(() => { debugger; }, 10000);
    • Before you are finished, you have to run Enable Custom CSS and JS from the command bar.

That should be it! Hopefully you will have a beautiful custom font VS Code install.

If you are looking for a good theme, I can highly recommend the Catppuccin theme, as that is what I use myself. Be sure to check out Monaspace’s webstite as it is a work of art. Happy Coding! πŸ‘©β€πŸ’»

Headshot of Kieran Klukas

Kieran Klukas β€”πŸ  Homeschooled 10th grader | πŸ’» Homelaber | 🐧 Linux Enthusiast | πŸ”’ Privacy Nerd | 🚁 FPV Pilot | 🌐 Internet Aficionado | 🌍 Open Source Enthusiast | 🎻 Violinist | πŸ“š Bookworm