body{
font-family: ”arial’, serif”;
}
h2{
font-family: "Audiowide", sans-serif;
}
p{
font-family:"Trirong", serif;
}
				
			

				
					
p{
font-weight: 900;
}
h2{
font-weight bold;
}
				
			

Video Summary

All right, in this lesson, we’re going to talk about font families. And this is how we’re basically going to call the different fonts to be able to use them throughout our website. And how we do this is by using the font family property and implementing the value, which is just the font that we will. So we’re going to be we’re building WordPress websites. We’re gonna basically be using all Google Fonts because there’s just so many fonts that we can use and it’s just super easy. And we can just literally copy and paste from that platform, the exact declaration which means the font family and the value of the font that they want us to use. So it’s kind of like a no brainer. It’s just easy copy and paste situation. But I do want to talk about the difference between setting up the body and different elements. So if you want to change the font for your whole website, you could target the body and every web page, every text that’s through there, unless it’s specified differently, we can make every text areas where we can make every text Poppins or Times New Roman, if we wanted to. Targeting the body allows us to easily change everything instead of having to go through and targeting every paragraph, every heading tag, every button, right. We’re just able to target the body and be, you know, be able to save us a lot of time. But this is only that only works when you have a lot of tasks that you want to have as the same and it makes a lot easier if you just want to go in through and 10 or change the heading tags or certain paragraphs. That’s where you can call it that and say well I want this font family to be audio wide. That all these H twos look really great with this font and it really makes the website full a little bit better and catches the eye for the How to and then they can go in and once they start reading the paragraphs you want this an easy to read. font like Arial so before we get into code pen and really start playing with the different font families and how we can manipulate that I do want to go over the font weight, and the font weight is just with certain fonts. They have different stylings that that is incorporated with that font. So when we were looking at Poppins we were seeing that there was a very thin version, and there was a very thick version. And what we can do is we could potentially make that font a thicker or thinner bold or a very light version of that font and I do you want to say that not all fonts have this feature or can you can really manipulate this feature as much as you’d like to with every font. 

There is ways that you can actually bold this and make it lighter, but it’s not going to work for everyone. So I do want put that stipulation in there but you might run into a situation where maybe the bold for that font is a little bit too much and you want to lighten that up or maybe you want to make it more thicker, bold. 

But again, we would probably only want to target this for individual headings or individual paragraphs or or maybe there’s a span where you want to highlight a series of words and you want to make sure that the bold is not overtaking the paragraph. We want to make sure that it looks the way that you want it to and before we go through I’m just gonna go through the flat rate values real quick. And basically there’s just like the regular normal ones. So normal is the default. So if you have one that’s super bold and you want it back to normal, you can potentially call to that element and make it normal or you can make it bold or older or make it later. These are very generic terms. 

Again, it all depends on what font you’re using and how well these terms are going to work. But if you do have a font that has like with pop has a had a multiple different structure of light, or from lighter to heavy. This is how we can you can set that up as basically increments or increments of 100. So 100 to 900 100 being the lightest and 900 being the thickest. So with that being said, I think just having a code pen and playing around with this is really going to show you how all this works together. so I will see you in the next lesson when we’re on koat.com.