Fonts

Quick reference

• 00:05 Okay, in this video, I wanna talk about fonts.
• 00:07 Now this is just a regular default font, I think its Times New Roman.
• 00:11 We can change this very easily with CSS using the font family tag.
• 00:15 So it's just font-family and then quotation marks.
• 00:19 And then you just type in the family name that you want.
• 00:21 So we can go Arial, for instance, and save this, hit reload, boom, we get Arial.
• 00:27 We can change this to Courier New, save it, hit reload, boom.
• 00:33 So there are a lot of default fonts you can use.
• 00:36 Arial is sort of popular.
• 00:37 You can download fonts and
• 00:39 install them into your index page with link rel type of style sheets.
• 00:43 You can download fonts from Google, you can use Google fonts and tags for that,
• 00:46 all kinds of stuff.
• 00:47 I'm not gonna go through all the different fonts.
• 00:49 There's thousands and thousands of them.
• 00:51 But this is a very easy way to change the font that you wanna use.
• 00:56 Now another way that you can play around with fonts is with the style.
• 00:59 We can do italics, we can do oblique, and well, let's just kind of look at this.
• 01:04 We do that using the font-style, and we can go, let's say, italics, italic.
• 01:12 Save this, reload, boom, it sort of leans a little bit, we can go normal.
• 01:18 Sometimes you want to designate normal.
• 01:20 That's just normal.
• 01:21 But we could go, Oblique, so sorta like italics.
• 01:28 And that's pretty much font style.
• 01:29 We can do, let's get rid of this guy.
• 01:32 We could do font-size, and let's go 30 pixels.
• 01:38 It shrinks it a little bit.
• 01:40 Let's go 300 pixels, boom, huge.
• 01:45 So font size.
• 01:50 It's already slightly big because the h1 tag, by default, makes text large.
• 01:55 But if you wanna change it, the defaults, you can do font-size.
• 01:58 You can also use something, instead of px, you can use 2.5em.
• 02:03 And is just a unit of measure.
• 02:09 Then we can change this to 5.5, makes it a little bit bigger.
• 02:12 And nobody understands the nobody uses it, you're just gonna use pixel.
• 02:16 But I just wanted to sort of let you be aware of that.
• 02:19 So another thing we can do is change the font weight.
• 02:23 And we can change this to bold.
• 02:27 And you see there's bold, bolder, lighter, normal, and then some ranges.
• 02:33 Usually you're gonna use bold for something like this.
• 02:35 And in this case, our text is already bold because we're using an h tag.
• 02:40 Let's go ahead and put this in our p, and save this and come back here.
• 02:44 And wrap this in a p and say hello world 2.
• 02:49 Save this, hit reload down here, we get this like that.
• 02:53 Now if we come back and remove the bold font weight, save this, reload, boom.
• 03:00 You can see it's not bold anymore.
• 03:02 So the bold one is pretty useful.
• 03:03 So that's fonts, font, font-family, font-size, font-style.
• 03:07 Font-weight, you'll use those an awful lot, I use font-weight a lot.
• 03:11 Yeah, so that's all for this video.

Lesson notes are only available for subscribers.