DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Cascadia Code: a new font for Visual Studio Code and Terminal
Emanuele Bartolesi
Emanuele Bartolesi

Posted on • Updated on

Cascadia Code: a new font for Visual Studio Code and Terminal

A few days ago, Microsoft released a new monospaced font.
It's perfect for Terminal and Visual Studio Code.
The font is open source and licensed under the SIL Open Font License on GitHub.
It means that is very easy to contribute for everyone.

Installation

You can use this new font everywhere.
For example I use it in Terminal, Visual Studio Code and since a few days, in Visual Studio 2019.
You can install the latest version from the official releases page on GitHub: https://github.com/microsoft/cascadia-code/releases

After the download, you can open the .ttf file and click on "Install".
If you have a previous version of the font, the new version overwrite the old one.
I recommend to uninstall the previous version before the new installation.

Setup Visual Studio Code

To setup Cascadia Code in Visual Studio Code, open the menu from File -> Preferences -> Text Editors -> Font and in the textbox write "Cascadia Code" before the other fonts.

You have to enable the checkbox to enabling the Font Ligatures (see the picture above).

Setup Terminal

From the down arrow on the top of the Terminal window, click on Settings and find your favorite profiles.
In the Font Face json property, write "Cascadia Code" and close Visual Studio.

Alt Text

If you want to know how to create and customize Terminal, check out my post.

Setup Visual Studio 2019

As I mentioned before, you can use Cascadia Code in Visual Studio as well.
From the menu Tools -> Options -> Fonts and Colors, select the font from the properly dropdown.
Font Ligatures in Visual Studio are enabled by default.

Alt Text

Conclusion

I used to setup all my IDE and editors with Fira Code, but now I switched everything to Cascadia Code.
If you want to contribute to the official repository, you can go here and fork the project.
If you are curious, you can read more on the offical release post.

Top comments (20)

Collapse
 
fcrozetta profile image
Fernando Crozetta

After trying this font on my vscode, I switched back to Fira code, but it's a personal choice.
Personally, I Think Cascadia is more "blocky" and visually made it more difficult to understand the code I'm writing. Do you had any problems like me?

Collapse
 
cooknl profile image
CAPN

Yeah, I'm finding it a bit "heavy", like everything is bold.

Collapse
 
robole profile image
Rob OLeary

There is different weights AFAIK, you can try a lighter than regular weight. I heard someone mention this recently

Collapse
 
samdx profile image
samdx

Yes. Iosvka (github.com/be5invis/Iosevka) is also a great alternate to Fire Code but not Cascadia.

Collapse
 
aminelch profile image
Amine L'ch

same here , i found Fira Code more readable btw i use this font on both intellij IDEA and Codium

Collapse
 
examosa profile image
Jules A.

My one qualm is that Cascadia Code doesn't seem to support powerline characters, whereas Fira Code does.

Collapse
 
thadavos profile image
ThaDaVos

There's a new version of Cascadia Code called Cascadia Code PL which has the powerline characters

Collapse
 
tvl83 profile image
Thomas Le

Jetbrains just came out with "Jetbrains Mono" a week or two ago. It's a pretty cool font that I am changing to. I haven't used Cascadia but I'll check it out too. I love all things jetbrains so I am a little bias :)

Collapse
 
sinewalker profile image
Mike Lockhart • Edited on

My favorite screen fonts are all Microsoft ones.

Collapse
 
sinewalker profile image
Mike Lockhart

A good Free alternative to Georgia is Caris SIL

A good Free alternative to Verdana is Google's Inconsolata

Collapse
 
xgstq profile image
James

I tried it, switched back also. Initially looked good but then noticed the === had no gaps between each character. Might be just my setup, anyone else get this?

Collapse
 
rcoundon profile image
Ross Coundon

That's the font ligatures in action, I think

Collapse
 
raglandcodes profile image
Ragland Asir

You can disable it by adding

"editor.fontLigatures": false

to settings.json file

Collapse
 
mejanhaque profile image
Muhammad Mejanul Haque • Edited on

for those who who is missing the powershell theme icon/font style, use Cascadia Code PL instead of Cascadia Code in setting...

Collapse
 
lornova profile image
lornova

I'm using the latest version of vscode (1.41.1) and there isn't a Font Ligatures checkbox. Instead there is the link "Edit in settings.json" but then what is the attribute name?

Collapse
 
thadavos profile image
ThaDaVos

As mentioned by someone above:
"editor.fontLigatures": true
Also if you want Powerline characters, you need to download Cascadia Code PL

Collapse
 
khuongduybui profile image
Duy K. Bui
Collapse
 
deyvisonrocha profile image
Deyvison Rocha

Wow! Nice font! Using now! Fira Code is freeze now.

Collapse
 
trakode profile image
Trakode

From my point of view I never hesitate to test a new choice. Thank you

Collapse
 
deathrid profile image
wangchauyan

Thanks for sharing this. After installation the Cascadia code into VS Code, the whole editor panel is perfect now!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.