VSCode Fonts & Ligatures

You may already know that you can change the theme in VSCode, but did you know you can also change the fonts and add ligatures!

There are a number of fonts out there aimed at programmers, some look pretty cool and others claim to prevent eye strain while reading all those lines of code, so how do you change the font in VSCode? And what is a ligature?

How to Change Your Font

1. Download and unzip your font.
2. Find the ttf file and install the fonts from here. On a mac you can just open the font with the font book and install from here. On windows, right click the file and choose install.
3. In VSCode, go to settings and search for font family.
4. From here you can choose where you would like to use your new font. There are a number of options that include the editor, the terminal, your markdown preview and more. Note that a number of the other choices, such as the terminal, use the editor font as their default font if no font is chosen.
5. Want to change the font size? Search in settings for font size and you can select a default font size to be used in your editor.

What is a Ligature?

A ligature is a glyph that combines a sequence of characters into a new form that makes it more pleasant to the eye (remember, we're all about reducing eye strain).

Some fonts allow the use of ligatures, and they're pretty simple to enable - allowing you to create fat arrows and triple equals just like all the cool coders on Youtube 😂

How to Enable Ligatures

1. In the command palette, search for your settings.json file.
2. Find the editor.fontLigatures key and change the value to true.
3. Save the file and you should be able to now use the ligatures. If they don't display, perform a refresh.

Some Fonts to Try

All these fonts include ligatures. Some may have additional features, like italics or script versions of the font.

Free Fonts

• Cascadia Code
• Fira Code
• Fixedsys Excelsior
• Hasklig
• Iosevka
• Jetbrains Mono
• Monoid
• Victor Mono

Paid Fonts

• Dank Mono
• Mona Lisa
• Pragmata Pro

Bonus: VSCode Profiles

Did you know that VSCode also has profiles?

Profiles are a way to set up a custom workspace that can be easily switched as well as imported or exported - so for example you could have a profile that uses a specific theme and font for working with python, and then have another profile set up for PHP, or a profile for work and another for your personal projects.

You can find more information on profiles here: VSCode Profiles

Do you use custom fonts and ligatures in your IDE, or customised profiles? Share your favourite settings in the comments 😊