Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Custom Programming Fonts with VSCode

    Ahmad Awais ⚡Ahmad Awais ⚡
    vscodeVS Code

    Developers spend 80% of their day looking at the code. It's only fair if that code looks good with a custom programming font. In this lesson, learn what options you have for both free and premium custom code fonts.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Let's go ahead and change the font of our Visual Studio Code. For that, press Cmd+Shift+P, open the command palette, and search for Settings. Open the settings. Let's toggle the sidebar.

    I have put some comments here in the User Settings area to make the format a little better. These are the settings that are being contributed by third-party via Sublime Text Keymap that we just installed. Our them setup includes Shades of Purple and VS Code icons.

    Let's go ahead and search for the font family, and let's just copy it to the settings. I'm going to delete the font size for now. I recommend that you change the default font to something like Operator, which is a paid $200 font, but I really like how it is. You spend a better part of your whole life looking at this code, it's only fair that it looks good. I recommend that you try out Operator.

    If you're looking for a better free option, I recommend that you try FiraCode. You can find FiraCode on GitHub. Go ahead click download, and install it on your system. After that, right at the bottom, you'll find that it has instructions for Visual Studio Code. In font family, we need to put FiraCode. Let's go to the User Settings area and add FiraCode here. It changed the font for us.

    The next thing that they're recommending is font ligatures. Let me just show you what it is. I'm going to search for font ligatures and enable font ligatures, which are set to false by default, setting it to true. Now if you go ahead and take a look at this file...Let me zoom it a little bit. I'm checking if the stack is empty and this particular function returns a true or false.

    These right here are three equal signs. This is what font ligatures do. For example, if I'm going to write "not equal," it is going to turn it to something like this. If I'm going to type "hyphen" and then greater than sign, nice little arrow. Here is how the inaudible looks like. Even the greater, equal to signs are different.

    You can also try another free font, Source Code Pro by Adobe. This is also a pretty good font. Anyhow, since I like Operator Mono, I'm going to change it to Operator Mono. There you go.

    The next thing I'm going to add is the font family for the integrated terminal. If you press Ctrl and tilda, you can find the terminal right here at the bottom. I, for one, use this Inconsolata Powerline patched fonts, which you might not, which are pretty much out of the scope here for this particular course. I'm just going to paste my own settings. You're welcome to use FiraCode for there as well.

    For that, let's search terminal. Let's copy this setting terminal.integrated.fontFamily. I'm going to paste it here. I'm going to use Operator Mono on top of Inconsolata for Powerline. You can find Powerline fonts on GitHub on this link.

    Now the size of this font looks really small. I'm going to search for font size. I'm going to make it something like 17. I really like this font size, but you can choose whatever inaudible for you.

    After setting the font size, let's search for fonts line height. There it is. Something is wrong. Unable to write into the user settings. File is dirty. You have to first save and make sure that the file is saved before you are trying to add something new to it.

    Just press Cmd+S to save this file. Now I'm going edit, and now it works. A good typography practice is to have your line height 1.45 times of your font size. I'm going to open up Numi. 17 is my font size. 1.45 times becomes 24.65. Let's keep it to 24.65, and that is inaudible .

    Let's define the font weight now. Editor.fontweight should be somewhere around 400. You can set it to whatever you think is right for you. This is just a personal setting for me based on the Operator Mono font.

    The next thing I'm going to change is the letter spacing between each letter. For that, let's search for letter spacing. There you go. I'm going to keep it to 05. I think that's good enough. The final setting that I'm going to add related to font is font aliasing. Let's search for alias. It basically controls how your font is being rendered on the screen. I'm going to turn it to auto.

    What this is going to do is if I'm on a Mac, and I have a letter that's thin, it will render my font a bit thin. For example, if I'm at a conference and the external monitor that I connected to is a simple HD monitor, then it will render this font a bit thicker.

    I think our font setup is looking pretty good. Let's see how the code looks. It looks pretty clean and neat, much better than we had before these settings. This is what we had before this setting. It was hard to read. Right after I add these settings, this is what it looks like now. Pretty neat, right?