DEV Community

James Q Quick
James Q Quick

Posted on • Originally published at jamesqquick.com on

My Favorite FREE VS Code Font in 2022 - Install and Setup with FONT LIGATURES!

VS Code is amazing, but it's pretty boring looking by default. The good news is that it only takes a few minutes to start to customize it and make it look much more fun! In this article, I'm going to show you how to install and setup my favorite FREE VS Code font, Cascadia Code.

Install

To install the font, download the latest ZIP file from the releases pages(2111.01 as of this article). After you've installed the ZIP, extract the files.

Then look for the different font files inside of the ttf folder.

ttf folder for Cascadia Code font

On a Mac, you can double click each one of these files, and choose install.

install cascadia code font on mac

On Windows, I believe you can right-click on the font files and choose "Install". Here's a link for more details, How to Download and Install Cascadia Code Font for Windows.

Setup in VS Code

Now that you have the font installed, you need to configure VS Code to use it. This will only take a second. Open your VS Code settings by clicking the gear icon in the lower left corner. Then, search for "Font Family" and type in "Cascadia Code".

set font family in vs code

Now, if you look at your code, it should look much better! Note that you may see a bit of a delay here. You may have to close a code file and open it back up.

Font Ligatures

One of my favorite features of this font is the ability to use Font Ligatures which create custom characters for things like triple equals, arrows, etc. In your settings, search for "Font Ligatures", and click "Edit in settings.json". Then, assign that property in JSON to true.

{
  //...other settings
  "editor.fontLigatures":true
}
Enter fullscreen mode Exit fullscreen mode

Here's a final screenshot of my code!

vs code with cascadia code font and font ligatures

Note that I think these a really neat, but keep in mind that you'll be sacrificing a bit of readability by using them since many people aren't used to seeing them.

Extra Fonts

I figured I'd give you two additional font options if you're interested.

Fira Code is another great FREE font that also supports font ligatures.

Dank Mono is a PAID font (about $40 USD I think), and is one of the coolest fonts I've ever seen.

Wrap Up

Hope your VS Code is looking a lot more fun now. I'm curious what your favorite VS Code font is? Let me know in this Tweet.

If you'd like more tips for working with VS Code, check out my FREE VS Code Cheat Sheet.

Discussion (3)

Collapse
lalit64 profile image
Lalit Yalamanchili

Nice! Though I like to use JetBrains Mono as my font for almost everything. It’s got ligatures and is free and open source.

Collapse
lalit64 profile image
Lalit Yalamanchili

With that I also use the patched Nerd Font for my terminal.

Collapse
jamesqquick profile image
James Q Quick Author

I've heard many good things about that!