DEV Community

jalpesh Vadgama
jalpesh Vadgama

Posted on

Adding free Cursive(Italic) font to visual studio code

We all love visual studio code editor for it's features, extensibility. In this article I'm going to show a great tip about setting up the cursive(italic) font absolutely free.

Recently, It has been trend that people are using the fonts that supports cursive fonts when visual studio code show the keyword and other parts at italic. For that people were paying for the font like Operator Mono, Dank mono etc.

I really like this kind of setup but I don't wanted to pay for it. I have searched couple options but I was not liking the font implementation specially the cursive parts and recently I came to know about this font and that blew up mind. It's look so cool you can see that in below image.

Image description

So do you want the same font for the your Visual Studio code editor. If yes, there tip is for you.

So let's me introduce the font it's called "Cascadia Code" font which is from Microsoft. Yeah Microsoft is making some cool fonts since so many years and this one is one of them. I also love consolas from Microsoft and I have used it so many year for the same.

The "Cascadia Code" font is created by Microsoft and If you are using "Terminal" app by Microsoft then it's comes by default with that. You can download the font from the following GitHub link.

https://github.com/microsoft/cascadia-code

After that you need to got setting of visual studio code and then you need to find the following setting font and add "Cascadia Code" as your editor font like below.

"editor.fontFamily": "Cascadia Code ,Consolas"
Enter fullscreen mode Exit fullscreen mode

And then you if you have enabled font ligature by default in visual studio code settings then you need to find the following settings.

"editor.fontLigatures": true,
Enter fullscreen mode Exit fullscreen mode

And replace that setting with following.

 "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'"
Enter fullscreen mode Exit fullscreen mode

And that's it. You are good to go you will get great looking italic font.

P.S. Please do remember that you need to have visual studio theme that supports the italic fonts. There are tons of themes available for that and I'm sure you must be aware about it.

For more information about this font. You can see the GitHub link they have clear instructions on it.

If you struggling with setting up the font in visual studio code. I have created a youtub video for the same. You can watch this video and follow the instructions given this video.

I have been creating lots of video related to programing, Visual Studio code and If you like this video, Please do subscribe to my channel at https://bit.ly/subscribetocodewithv and hit like button on the video.

Top comments (7)

Collapse
 
akuoko_konadu profile image
Konadu Akwasi Akuoko

Thanks a lot for showing me this, I've been searching for hours

Collapse
 
diabeticode profile image
Michael

"const" doesnt appear cursive like return as in your screenshot...additionally, can you explain what the editor.FontLigature settings are actually doing?

Collapse
 
diabeticode profile image
Michael

@jalpeshvadgama any insight on my comment or nah?

Collapse
 
sarugithub profile image
saruGitHub

use

"editor.fontSize": 11,
"editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"comment",
"constant",
"emphasis",
"entity",
"invalid",
"keyword",
"markup",
"meta",
"storage",
"string",
"strong",
"support",
"variable"
],
"settings": {
"fontStyle": "italic"
}
}
]
},

Collapse
 
jayad23 profile image
Kz

Great!

Collapse
 
arjun_kayalmoni profile image
Full Stack Spiderman
Collapse
 
arjun_kayalmoni profile image
Full Stack Spiderman

BTW Thank you for the fontLigatures settings. I was not aware of it..