Font & Font Ligatures

[00:00:00]
>> Burke Holland: Let's talk about fonts for a second. Over here in the exercises, I have given you some fonts that you can use inside of VS Code. There are some free ones and there are some paid ones. The free one that I use is called FiraCode. So if you were to jump out here to the FiraCode repo, what you can do is you can, under Releases, you would find this file here, you would download it, there is the zip.

[00:00:33]
There is a TTF file inside, you double click that. And then your Mac or your Windows machine will install it. You will hope to God there's not a virus in there, and then you will have the new font on your system. Now, once you have the new font on your system, you need to actually tell VS Code to use it.

[00:00:50]
So back in VS Code, the way that you're gonna do that is you're gonna go to Settings. And Settings is opened with command or control comma. When you do that, you get to the settings. These are the settings for the whole editor, and your just gonna search for font.

[00:01:08]
And you can see here we've got Font Family, and we just wanna change this. And I' m gonna change this to Fira Code. Now you have to get this just right, the name. So if you don't put a space here or there's not a space and you put a space, it won't work.

[00:01:23]
But then once we do that it will change the font for the editor. And in fact, if we go back to our app.js file, and let's go back to material icons, and we activate that icon theme. We're now using FiraCode, it looks a lot like the font that we had before.

[00:01:39]
The big difference is though that this font has something called font ligatures. So let's go back to settings and there's a box under font that says enable font ligatures, so I'm gonna go ahead and check this. And then what this will do is enable ligature fonts or font ligatures, rather.

[00:01:59]
So let's come back to a file here so I can show you exactly what this looks like. There are certain symbols that we use in programming that we would consider compound symbols. And these are things like equals, equals. So what font ligatures do is they turn those compound symbols into one symbol.

[00:02:18]
So we do equals, equals, you see we get a double equals. Let me increase the font size a little bit here. And let's collapse this. But in JavaScript if you wanna know something is really equal, what do you do?
>> Speaker 2: Triple equals.
>> Burke Holland: Triple equals, and you get an actual triple equals.

[00:02:34]
If you wanna know something's not equal, not equal, and you get a not equals. Or a not equals, equals, or as many equals as you want, I suppose. Same thing with like fat arrows, you get an actual fat arrow. If you do a greater than or whoa, I don't know what that is.

[00:02:51]
That's a weird symbol. What does that do?
>> Speaker 2: Fork in the road.
>> Burke Holland: What is that?
>> Speaker 3: A YAML.
>> Burke Holland: It's a YAML, is that what that is?
>> Speaker 3: YAML, the way it creates spaces between text.
>> Burke Holland: So you can experiment with this. Like if you do plus, plus you'll see they're actually joined, which is like less of an impressive ligature.

[00:03:06]
And there's the ands like this. I think you have to be like, if i and, that's not an and, that's dollar sign. I got something on the mind. So you can see they're sort of connected there. These are called font ligatures, there are lots of font. All of these fonts that I've given you here in our guide here have font ligatures.

[00:03:30]
One of the most popular ones is Dank Mono, you'll see that one used a lot. If you like it, just go ahead and buy it, fonts are a good thing to invest and again, you have to live in your editor. So you wanna invest a little bit of money there.