Video Summary

Alright guys, we’re gonna talk about Google fonts. And Google fonts is a platform that Google offers for us developers to be able to access over 1400 different types of fonts from their library and implement it right into our website. And WordPress makes it super easy for us to access this because all we got to do is download a simple plugin, and we’re able to instantly access any type of font through our CSS code. Now, I’m gonna we’re gonna get into that a little bit later. And it’s a very simple process, but we need to figure out what Google Fonts platform is and how we can pick our different types of fonts and use them and call to them and different elements throughout our web page. So let’s hop over into Google fonts and start learning of how we can actually get all these cool different types of fonts. So if you go to fonts.google.com you’ll land on this web page. 

And we’ll just kind of go through how we can search different types of fonts and really just find the ones that are gonna work for you. So if you know if you have an idea of a certain type of font that you want to call to and not have to find them in over the 1474 different types of fonts that they offer you can just search for them right there. You can also figure out what categories you want through here and kind of narrow those down. If you kind of have an idea of what type of fonts you’re looking for. You can change the font size of what we’re looking at here. So you get a good idea of what these fonts look like in different sizes. And also to which is really nice as you can type in your own sense and figure out what that looks like with that fine. So you could put in your put in your company name. And this was this can be very helpful when you’re trying to find a font that’s very similar to your logo. Odds are most of you have went to graphic designer and said, hey, you know, we’re looking for this, listen this and you probably don’t know which font they use. So you’re trying to find something that’s very similar so you can actually style and match that throughout your site. 

So this is a good way just to put in your different different headings different your company name and to see what different fonts look like. So let’s kind of play with the categories real quick. So let’s just kind of just go one by one and see what each one of these look like. So serif is usually the ones that have kind of if you kind of blow this up a little bit, you know if you see this bar and kind of has that little kind of like platform tail right there, the wise you know, it’s got that flat, top and bottom to it. That’s more or less like the saref. Now the sans serif. Let’s go to here. This is more of like your real easy, like font fonts. There’s no There’s no rule base on these. It’s just kind of your typical regular fonts. Display. Display is kind of a very unique font. There’s no real there’s no real there’s no real definition to some of these fonts. But this is where you can find some actually cool some really cool looking styles and you know that you that could really like a really maybe make a headline look really cool. But also to is that my recommendation is is that use these these type of fonts sparingly. Depending on how you’re using them. Say for instance, if we’re if you’re using this Rubik gemstones, if you had a full blog post and all the text was this font, it’d be very hard to read it you know, you might frustrate some of your readers especially maybe even the Rubik final, where you’re missing some of these, these connectors right if you kind of open this up, there’s no connector at the end at the top. Right. It’s a very unique style and if you had a full paragraph or two of just this font, it would it might it wouldn’t really hurt the user experience but if you were able to use this as a headline for your blog post or before the paragraph, it very well could work right. 

So let’s go and let’s check out the handwriting is pretty self explanatory you get this is where you if you wanted to and say you’re the owner of the company, and you want to have a you got a quote that you know that you’re using and you want to have kind of like your signature under there. And you didn’t want to have your actual signature. You can use these cool fonts that makes it look like you wrote your name out or you signed your name and cursive. And then the mono space is more like the mono space kind of reminds me of like the old typewriters or the you know, like a really kind of word document type of fuel. But this is how you can go in and just play with these different fonts and just kind of narrow them down to the style that you’re looking for. For this one, I’m just gonna put them all back again. And what we’re going to want to do is we’re going to try to figure out and play with a few different fonts. So let’s kind of scroll down and Poppins is a very popular, very popular to our font that’s used through a lot of websites because it’s super clean. It’s easy to use, it’s easy to read. So if we want to use this we could come here and click on this and it gives us a ton of different options of how this font could and would look like. Now in the next section, we’re going to go over what these 300 mean and basically was certain fonts you’re allowed, you’re able to figure out how thick or thin you want each character of your line to be. Now if you select it all if you if you go here and select any of these, you can call to them later. Or you can use your own CSS properties to make your fonts look like this. 

So for instance, Italic we can use an italic tag to italicize like this, the sentence or the use here series of words. Or if we wanted to bold we can use the strong tag to bold some of these, but if you wanted to, and you want to have all your texts be a little bit more thicker, you can call to these different weights. So as you can see through here we have 102 all the way down to 900. Right. So like that’s what we’re looking at. I always recommend when you’re picking your when you’re picking your font just choose the regular the regular version because we can manipulate that later. And and really if you click any of these other ones, you can still call and manipulate that how you want later. So for the for instance, let’s just say we choose the regular and now what happens once you select this, this little pop up comes up and this is where we’re going to be able to use this font. So if we were building an HTML document, like a website from scratch, and we’re coding ourselves, we could copy and paste this section right here in between our header head tags, right if you kind of look over here, remember when we were first starting off, before we’re using code pen, we were using the visual, the Visual Studio, that Microsoft has to be able to build these HTML documents, CSS documents and connect them all. So if we were using that this is what we would use. But what’s nice about WordPress is we can just download the Google Fonts plugin, and it automatically places that code in for us so then we can call to any font family that we want. And for instance, what we’re going to do in code pen is I’m going to copy this as a styling tag. And we’re going to be able to use these fonts within code. 

Alright, and down here is where and it gives you the line of code, right? That’s the font family to be able to use this exact font. And when in the next sections, we’re going to go over with font families and how we’re going to be able to call it that. I really wanted to go over just the Google Fonts platform and show you how you can utilize this on your website. Because more and more times than not all you’re going to need to do is find the font family that you want and copy and paste that over into your additional CSS files. And I know, I know like you might be confused by this, but we’re gonna get into that once we get into WordPress. But for now, we’re just trying to learn the basics of CSS and learn the basics of these platforms. So let’s say you more times than not you’re gonna have multiple different fonts that you’re going to want to use throughout your website. 

Let’s just say like we use these ones, these ones if you look at them closely, they are they are different, but if you took them from a glance they don’t really look that much different from one another. So for the example that we’re going to use in further demos, I’m gonna use these. So what you can do now is you can come here, and with this one, the Poppins has over 18 different examples. This font only just has one and it’s the regular 400 This is just the regular font that will be used throughout the site. So what we can do over here now is we can go here and add this on. And what this does is if we were doing it from scratch, it would add this font family into the length that we put in the header and add this to the styling tag that we’re going to use encode them. 

So now, now we found that and we were we’re going to add this one as well. Alright, and again, this one only has one single styling variable and we’re just going to add that and once we’re here all we got to do is just copy and paste this over for the demonstration. But if we were in WordPress, all we have to do is just copy and paste these font families over and use those to the elements we’re calling to, and we’re able to have those fonts on our websites. Pretty powerful stuff. Before we get into the font family to start playing around with that. I do want to go over the font weight of everything so that you understand that we can use different weights to make and like bold and send out some of our fonts that we’re using. So with that being said let’s hop over and learn about font weights and see how we can manipulate our thickness over fonts.