Check out a free preview of the full Visual Studio Code course

The "Custom Fonts" Lesson is part of the full, Visual Studio Code course featured in this preview video. Here's what you'd learn in this lesson:

After examining typefaces enhanced specifically for coding, Mike shows how to set up the fonts to customize the display in VS Code.


Transcript from the "Custom Fonts" Lesson

>> Mark North: So there are fonts built just for developers. Custom fonts that you can install that are just intended for code. They're all monospaced. Meaning, each letter has the exact same width. The one that I've been using is called Fira code. This is one of my favorites, but these are all free.

So I will show you why you might want to use something like Fira code.
>> Mark North: So one of the benefits here is something called ligatures which is think of how script font might look, a cursive font when you have two letters that are next to each other, it will render them as kind of a different combined glyph.

Basically, taking the end of the stroke for the first letter and moving it into the second. So some of these fonts have taken that ability to do that kind of thing with text and they've done some interesting things. Like if I say, greater than or equal to, I end up looking like that.

Or if I say, not equal, I look like that. And if I add another equal sign not double equal, it looks like that. Or my fat arrow functions, kind of become nice like this. When I'm writing a licks here, there's something called a pipe forward operator. Turns into a nice little triangle.

Asterisk usually is written above the midline of a font, almost like a footnote. But with this one, it is written on the same line and all of the arithmetic symbols like plus and minus. They're enlarged by about 50%, so you can easily read them as you go through this stuff.

So it really does make quite a big difference and just find what you like, and install it. You don't wanna install a whole bunch of fonts, they take up system resources. They basically have to live in your RAM, your whole table of fonts that you have installed in your device.

So it's not a good idea to just like install a thousand of them. But find a couple that you enjoy, that are good representative examples of this is what I like for code and I use these for presentations and get them right. So this is how we would go about adding one of these to our work space.

These are the things that you would paste into your user settings. So you see I've got Fira code. I've enabled font ligatures, which is the thing that will let me look at greater than or equal to combined and form one glif. Now if you selected that and pasted it somewhere else, it's actually two characters.

It just shows on the screen as one thing and this basically, oop, sorry. This thing here is the same flag, but I'm also turning on ligatures for the integrated terminal. So if wanted to have a difference there, there's the option to. One thing I wanna show you, so there's some non-free fonts that you can get.

One of the popular ones, which I am just demonstrating here for you. It's called Operator Mono. So if I save that, one of the cool things about Operator Mono is that if we do our color customizations here and we said like let's say that keywords are italic.
>> Mark North: And we need to discuss some of that as keywords.

>> Mark North: There we go. So that's actually cut little cursive e letters for any keywords. Do we have an if somewhere?
>> Mark North: I guess there are no ifs in this code. There we go, if and else. So you can have some interesting stuff going on here. And if you see this kind of thing in screenshot, it's just cuz someone's got one of these fancy phones.

>> Mark North: Backing it up. Save and we're back.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now