Have you thought about using google fonts in WordPress website but are unsure how? Here’s a simple way to apply them without having to use a plugin – All for FREE TOO!
Full Video Transcript
Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton here in San Antonio, Texas at WebTegrity. You have found a YouTube channel solely dedicated to all things WordPress.
If you are interested in figuring out how to use these Google fonts inside of you WordPress website, without using a plugin, that’s what I’m going to walk you through right now. Of course, if you watch my channel, you know that I recommend that you use no more than one dozen plugins. If you have more than 12 plugins at one time, you start to see your website start to bog down if you use more than that. We actually recommend here at WebTegrity to use five or less, if you can get away with it. This is one of the ways you can do it. It’s a little bit more intimidated because, you have to learn a little bit of nerd code and dive into a few files that might seem a little scary; but, don’t worry about that. Follow me. I’ll walk you through it. You’re going to go over to fonts.google.com. You’re going to check that out.
Go here. I’m going to go ahead and maybe pick out two fonts that are pretty different looking from each other. So that you can really see the difference on my example site. I’m going to grab Ravie and Railaway. Both of those. You can see as I’m adding them, by clicking the little plus sign, they’re adding them down here for me. When I open this drawer, check this out. Super, super easy. All we’re going to do is copy this one section here. That’s this link file. I’m going to copy that onto my clipboard. Notice that they’ve included Railway and Ravi. Both of them are sitting here for me to use. So, I’ve got both of them on my clipboard now. The first step is to jump into your dashboard. You’re going to go to “Appearance” and go to your editor. The first place that you’re going to look for is a file called “Header PHP” We’re going to click on that and open that up. Now, before you start tinkering in here, please know that we can break our website if we’re in here and we accidentally mess something up.
I need you to be very, very meticulous while we’re working on this. Be sure to set down the beer, set down the wine. Makeup you have a backup in place, alright. Absolutely know how to roll back your website, if something goes wonky or weird here, okay. Any time you’re in any of these little files over here be aware of a game plan of how to roll back your site. What I want you to do, no matter what theme you’re using… Your theme up here is going to have a line that is forward slash head. You’re going to have one that is without the forward slash. I want you to find the one that has the forward slash, head. That ends our header. We want to go just before that. Put your cursor there. I want you to paste in that really cool little bit of nerd code. The one that we got from Google Fonts. We want to paste that in right there. Then, I want you to scroll down and click “Update File”. So, what this does right now, is it allows us to reference the cloud where those fonts live. That’s step 1. There are only two steps to this, it’s pretty straight forward.
Now, we just have to tell our WordPress site, where do I want to apply those two different fonts. Which sections of my website to I want to change? Well, what we want to do is use a theme that allows us to have a custom CSS box inside of it. Most of the themes these days offer that. We’re going to go into that area next. Let’s go do it. Most of them are inside “Customize” or they’re inside of your them itself. Our theme has it inside of “Customize”. I’m going to scroll down here and this one says “Additional css”. So I want you to see the front side of my website. There’s a little bit of paragraph text that lives here and this is my h1 . I know I want to affect those. So, let’s write a little bit of nerd code, okay? Inside of our css, our custom css box, I’m going to say ‘p’ for all of my paragraph text and then open curly bracket…closed curly bracket. Inside of there, this is the nerd code you paste…check this out, you don’t even have to write it. You can just copy and paste it.
I will use Railway for my paragraph text. I’m going to copy “Font Family Railway”. Just this bottom line here; because that’s the only one I want to use for my paragraphs. Did you see that magic happen just then? Look at that you guys. Hold on. I’m going to undo that. Look at what font is here. It looks like that and as soon as I paste that in….look how cool it changes. Immediately, it applies Railway. So, let’s say now that I want to change and use ravie for my h1. I’m just gonna type “h1” open curly bracket, end curly bracket. Kind of scoot over there a little bit and organize some things and I’m going to come over here and come get ravie. Now, I’m going to jump back into my file here. Paste that in. Look at that. Look up here. There is my fun font happening up there. Isn’t that cool? This one might not be in h1. Let’s see what this little guy is, right here. Our home option there.
If you found an h1, he’s an h2, so we can just add that to that and say all h2’s, as well. Now our little guy here lives as h2 in ravie font. So, hold on a second. Y’all are probably saying “Hey, you talk way too fast Kori. All that flew by me”. Just click pause for a second. Rewind me, click pause. This is pretty straight forward. The only tricky part is trying to figure out what your author named each section that you want to manipulate. I didn’t know that “Home” was not in h1, it was actually in h2. So, in order to find those things out, you can use your inspect element. Right mouse click and say inspect element and it will show you what your author coded that section to be. You can apply it inside of this custom css box. Isn’t that cool?
If you have questions about this, first step, take a look at my other YouTube videos; because, I have quite a bit on learning css, so you can do stuff like this. It’s super cool. Way nerdy. Next step, put your question in the thread below. Let’s talk about it. Ask me some questions. Give me a call. Send a tweet. Connect with me. I would love to help you. All you have to do to make this thing go live is save and publish up here. Then it’s all gonna be applied to your website and this style sheet cannot be overridden inside of any updates that you do. Isn’t that super cool? I hope you’re having a great WordPress Wednesday. I will see you all next week. Bye, y’all.
Over 200 Free WordPress Tutorials https://webtegrity.wpengine.com/our-blog/