Home / Blog / How to Install JetBrains Mono Font in Visual Studio Code
How to Install JetBrains Mono Font in Visual Studio Code

How to Install JetBrains Mono Font in Visual Studio Code

Daniel Kelly
Daniel Kelly
May 14th 2022

Let’s face it, JetBrain’s Mono is a beautiful mono-spaced font useful for both presenting code and working with it in an IDE. It has an increased x-height for a better reading experience, better shapes for seeing columns of letters, and a developer friendly assortment of ligatures that make your all of your multi-character operators actually look like a single, unified operator.

jet brains mono ligatures comparison

These qualities, and more, make it a great choice for use when developing Vue.js applications in Visual Studio code. In this article, I’ll break down the steps of how to install it for the officially recommended IDE for Vue.js development: VS Code on MacOS.

Step 1: Chuckle a little at the irony

Yes, JetBrains Mono is a font produced by the company responsible for the awesome IDEs PHPStorm and WebStorm among other softwares. And we’re installing it in VS Code... aren’t we the rebelious type? 😆 But that’s ok, JetBrains has generously open sourced the font to the world and we are free to use it in any program we’d like. So, thank you, thank you, thank you Jetbrains!

Step 2: Download the font

Next, you’ll need to head on over to jetbrains.com/lp/mono/ to download the font files.

screenshot of download button on JetBrains Mono website

Step #3: Move the Font Files to the System Fonts Library

Once the files are downloaded you can find them zipped up in your downloads directory. Unzip them copy all the ttf files to your clipboard.

screenshot of font files in finder

Then use the Finder command “Go to Folder” (in the top menu under Go > Go to Folder or keyboard shortcut cmd+shift+G) to open the /Library/Fonts directory

screenshot of goto fonts directory in finder

Finally, paste the copied .ttf font files into the /Library/Fonts directory.

Step #4: Set Jetbrain Mono Font in Visual Studio Code

In VS Code, use the command palette (cmd + shift + p) to open the JSON version of the editor’s settings.

screenshot of command palette in VS Code

Then set the editor.fontFamily setting to JetBrains Mono and if you want the awesome ligatures as well, set editor.fontLigatures to true. Save the file.

"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,

At this point, don’t worry if your text turns to Times New Roman or some other totally inapproriate font for coding.

Step #5: Quit VS Code and Restart

To get the font to register properly with Visual Studio Code, you’ll need to quit the program completely (cmd+q) and re-open it. (I tried the “Reload Window” command as an alternative but it didn’t work for me.) After that you should be good to go.

Step #6: Verify JetBrains Mono Works

You should be able to tell a difference as soon as you re-open a file in the editor. It definitely won’t be Times New Romans anymore and you’ll have characters that are narrower and taller than those with the default font.

before and after screenshot in VS Code

To be extra sure though, you can try out a strict inequality operator (≠=) to see it’s distinctive ligature in action.

screenshot of ligature confirmed in VS Code

An that’s all there is to it! Enjoy this awesome free and open source font in Visual Studio Code and if you’d like more tips and tricks for working with Visual Stuidio Code for be sure to checkout our course Visual Studio Code for Vue.js Developers. In it, I’ll share loads of inspiration for VS code extensions, themes, keyboard shortcuts, and more that you can use to supercharge your Vue.js development workflow!

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Highlights from Vue.js Nation Day 2

Highlights from Vue.js Nation Day 2

The first day of Vue.js Nation was thrilling, and the second day was even better. The final day of the Vue.js Nation Conference was jam-packed with new announcements, stimulating discussions, and unique workshops. I'm overjoyed with fresh information. Continue reading for all the highlights from Day 2 of Vue.js Nation!
Charles Allotey
Charles Allotey
Highlights from Vue.js Nation Day 1

Highlights from Vue.js Nation Day 1

Vue.js Nation has officially started with Day 1 coming to a close and I can say that it has been super exciting and educative. A packed lineup of awesome speakers and in this article I’ll share some key highlights of the day.
Charles Allotey
Charles Allotey

© All rights reserved. Made with ❤️ by BitterBrains, Inc.