Video Summary

All right, so we’re about to start playing around with the font families and the font weights. But before we do, I want to start on Google Fonts because we’re going to copy and paste this stuff over into code pen for us to be able to really, really utilize what we have and I want I want this to be a part of the steps. So before we do what I want to do is I’m on I have Noto Sans, right here, this is the font and I get all these options and I what I’m what I’m going to do is I’m just going to pick bold 700. I’m gonna click this right here. I’m gonna add this to our section. So look at Noto Sans, we have regular 400 and we have bold 700. And this is going to come in a little bit later, but for right now, we have everything that we need. And we’ll just kind of minimize this. And what we’re going to do is we’re going to just click here and we’re going to copy this section or you can just highlight and click control copy, and we’re going to come over here to code pen and make sure that this is at the very top and we’re gonna paste this Alright, now we’re going to go back to here, and what we’re going to do is we’re going to copy and paste this whole section right over into here. I have a p tag, I have the two open brackets. We’re just going to paste that into here. Alright, and just to make this a little bit more uniform back this up. So what we’re seeing now is that we have all these different font families, but we’re only seeing one font and that’s because it it goes by order of operations. So the last one here is the one that the one that’s getting portrayed for this font family and you know what to make this a little bit bigger. Let’s make this font size. Let’s do 25 pixels.

Alright this will work. So we’re gonna get into the comment feature section, and in a few more lessons, but for right now, I’m gonna just explain why I’m doing this. If you put a forward slash Astrix and an asterix and forward slash basically what that does is it removes these lines of code from being read from the compiler or the machine that’s actually reading all the code that portrays your website. So now by doing this, and actually I’m gonna take this one step forward, I’m gonna highlight this I’m open this back up and I’m going to highlight each one of these. 

And I’m going to separate these. And as you can see, as I’m going through each one of these, each one of these fonts is going to be represented as we start from the bottom and going up and we think about the order of operations right? So we’re going to, we’re going to make this Poppins is our font right now. And now, Noto Sans is our font. And as we’re going through, you see how, how the different fonts are different sizes. So when we were looking at let’s take this off, if we’re just looking at whatever the standard, I think it might be times I don’t, I’m not 100% sure what the standard font is for HTML and CSS. But you can see that the paragraph or this paragraph ends right here, but now if we open up to the Seymour one, right ends up going to the second line and almost halfway through. Now if we ended up taking this and just putting in the rubric, Bubbles, right, it only takes us to the second line, but only right down here. So this is a great way when you are trying to figure out what fonts are going to look good on your site is to be able to copy and paste all these different fonts that you want into your into your CSS table. Or like this additional CSS feature on WordPress, and just be able to go and bounce back and forth between them. You know, because you’re gonna have a full web page eventually when we’re in WordPress, and being able to see okay, I like this font a little bit better. How is the sizing work? 

You know, it’s just going to work the way I want it. To. You’ll figure that all out by utilizing this. So for instance, let’s just, let’s just forget these ones were like, you know, this Noto Sans, this one just works the best for whatever reason. So we’re going to set this up with just using the Noto Sans, I’m just going to delete these out. Now, if you ever wanted to call to those funds that we had later, you’ll be able to within WordPress because you’re gonna have the Google Fonts plugin already set up and you’re gonna be able to call to all these cool different fonts but right now what I want to do is show you how font weight can come into play, when you have the ability to use these different font weights. So if you wanted to play with these different font weights, and I’m not going to go through each one, you can play with these on your own. If you want to but when you’re setting this up, you’re going and especially in code pen, you’re going to want to add all of these ones that you want to use. So for instance, with the Noto Sans, I have the regular 400 Add the bold 700. Now if you wanted to, you could go through and do you know, add the add the fin 100, right, the extra like 200. You basically all you really need to focus on is the number here, the italic. Don’t worry about that that comes with the HTML italic tag. 

But for the most part, you only got to focus on as the numbers. So I have the 700 here so we’re going to go back and we’re going to make this we’re gonna go font, weight, and we’re gonna go 700 And now we just made that font, just a little bit thicker, a little bit bolder verses of vs of what a regular bold tag would be. And let’s just play with this too. So let’s just, let’s just put this as a comment, so we can take that away for a second. And let’s put the strong tag here and see how that looks. 

Here and actually, let’s, let’s, let’s try this out. And let’s take this and see if this does anything. I’m not quite sure, but we’ll have this paragraph here, right? And this is what the bolt looks like. And this is what the 700 looks like. So what if we take this off? 

And see they look pretty much the exact same, you know? So that’s why I’m saying is like when you’re especially when you’re talking about smaller texts, that’s on like a web page or especially if we’re looking at mobile playing with the font weight is a can be useful, but also you end up you end up splitting hairs but you might run into a situation where a WordPress developer really use this font weight, and your font is say let’s that’s the here’s another thing too is let’s just see even if we let’s make this 65 pixels, and see if we can tell the difference. I can’t really tell the difference between the strong and the not. So for for that being said let’s just let’s just use the the normal use like the regular when we come over here and you’re looking at the fonts, if you just use the regular 400 that font will work time after time and then if you want to bold that later you can or if you want to go back and potentially come over here and do bold, it will basically do the exact same thing. So that being said, now let me know font families let’s move on to the next section.