CSS for fonts in WordPress

Feb 4, 2015 | CSS, WordPress Wednesday

Learn how to change your font style using CSS in WordPress. In this video Kori Ashton will walk you through some basic tips on how to make changes to your theme’s font color, font size, font family and much more. Even if you’re a total beginner with WordPress – you’ll understand these simple steps that can save you hours of headaches!!

Using p is for paragraph
Using h1 is for header 1 tags
Using h2 is for header 2 tags etc…
Using body is for body text
Using anything with a div class like .entry-title would be different theme to theme. This is why you need to use the Firebug Addon in Firefox.


p {
color: #000;
font-size: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans serif;
line-height: 24px;
letter-spacing: 2px;
margin-top: 15px;
}

Learn More about CSS for fonts >> http://www.w3schools.com/css/css_font.asp
Watch our other video for “What is CSS?”

Video Transcript

Hello, Everyone. Welcome to another WordPress Wednesday. I am Kori Ashton here in San Antonio, excited to walk you through the next few weeks. We are going to be going through CSS for WordPress. Alright, really these are CSS elements that work across the board, but I want to show you inside the environment of WordPress, how you can actually manipulate certain things.
This week I want to talk to you about how you can use CSS to manipulate fonts. Alright, so, if you have a whole paragraph of texts and you want to maybe change the font or maybe change the color or change the spacing, there’s all sorts of fun things that you can do if you understand what CSS is. So, if you missed our last video, I am going to put a link in the description box below to explain what CSS even is. So, if you are that much of a beginner, please take time, pause this video, clink on that link down below, and go ahead and check out that video so that you really understand what Cascading Style Sheets (CSS) are, okay?

Now, if you’ve done that and you are just saying, “Alright, Kori, but now I don’t know—first of all, I don’t know what’s possible with changing those elements, and two, I don’t know where to even go to change those things,” right? So, the truth is (let me shrink myself down here, dun-dun-ta-duh, really tiny today…that’s alright because I really want you to focus on the screen, okay?). The truth is if you want to come here and change, you know, how large, maybe the font size of this area here, how would you even know to do that?

Some authors, really, really kind theme authors, will give you a WYSIWYG environment where you can go into your Dashboard area and maybe go to your theme’s area and do a customized-type situation, right? I am not sure if this theme allows me to do it, but let’s go in here and see. Colors. Let’s see what this does for us. So, if I were to go into this area here (it is trying to load the page for a second), if I go in this area here and open it up, it is going to allow me to change the background color, navigation, static front page. What else is it going to let me do? Background image. Well, some authors will be so kind, they will be amazing, as to let you have maybe a tab here that says “fonts” or “typography,” right? In so doing, you could do a dropdown list that would allow you to change the size of the font. Maybe it’s too small, maybe it’s at a 24 and you want a 32, really big, chunky font. You are able to, in an environment like this, just change the numbers, if you will. Or, let’s say, when you hover over this, you want it to change to a blue instead of a red. Some authors will give you the ability to change those things in a WYSIWYG-type of environment like this so what you see is what you get or a gooey interface like this. But if like this theme, my author did not allow me to do that, what are some workarounds? What are some ways that I can still get in there and make those changes happen on my website? That’s really what I want to walk you through because what that means is then you’re going to have to nerd out with me a little bit and go further into customizing your theme than an author ever wanted you to do.

Alright, if all that makes sense, here we go. I want to walk you through what it would look like to change, and I am going to put the link down below the description box where you can go to the blog article that gives you all of this so that you can literally just copy and paste the nerd code that I have written for you, okay? I am going to teach you today how to change your font color, I am going to teach you how to change the font size, and I am going to teach you how to change the font family. What?! Alright, I am going to teach you how to change letter spacing so that if the letters are really kind of too tight because you are using a fun font and it’s kind of hard to read everything, I am going to show you how to kind of expand that without changing the size of the font (that’s a cool trick) and maybe the line height to adjust the spacing between each line of your paragraphs. So, this type of CSS, these elements, work with your paragraph mode so any of your like just normal text on a page, it works with if you want to change your H1 (which is typically what this is, an H1 tag), it can work with your widget boxes over here on the right side or wherever your widget boxes are if they have a title area that maybe you want to change the accent color of a widget title box. How do you do that?

Here it is.

So, if you have ever watched my tutorials before, you know that I highly praise the browser Firefox. That is what I use whenever I develop. Today I want to talk about their plugin, their add-on that they have, inside of their…(I am going to shrink myself way down because really I could probably just totally disappear. I am going to disappear for a second.) What I want you to do is use Firefox because they have this add-on over here on the right side, if you could follow my curser, called Firebug; and it is really super, super helpful if you want to figure out what element this is on the website and how can you go in and change it. Because first of all, I don’t know if it is an H1. I don’t know if this is an H2. I don’t know if this is just something that I wrote in there myself on the actual blog post, right? How do I get to that area?

So, go ahead and flip over to Firefox as your browser. If you haven’t done the add-on for Firebug, I will put that in the description box as well to walk you through how to do that. You are just going to turn it on, you are going to engage it, you are going to click the little element selector over here, and you are just going to hover over whatever font area you want to manipulate. I am going to drag this on the screen. (Please don’t freak out. I know this is a lot of nerd code, but I am going to show you really quickly what you are looking for.)
So, right away I have selected the big title area that says “What is CSS?. How Does It Work in WordPress?” Do you see that right here? Right away I know that it is an H1. Great! So, it is all my H1’s. So, when I come up here on the right side, you’re going to see all my different style sheet elements, all the CSS elements that affect—and they are in a hierarchical ranking—of how they affect that spot on my page. So, if I were to manipulate anything, you can check it out and see the change happen on the spot here.

So, right away it says that my entry title color is 4444, which is actually this really nice, dark gray color. If I wanted to do a test really quickly just to change the color of that font, I could back that out and type in a different 6-digit color code. Or, the reason why it was three digits right there is because that would actually repeat as 444444, and when they repeat like that, style sheets are so smart, it knows that you can only put it in there three times. So, if I wanted that to be red, let’s say, right away it can go CC1234 (go ahead and put that in), and it is showing me that that’s red—that’s great! Did it change? No, it did not change. So, why didn’t it? That is because that is actually a link right now. So, it’s being affected by my entry title “a” link. See this “a”? That means it’s a link, an active link. So, if I were to change that area now—this is how you do troubleshooting on this. Notice that as soon as I type that in there and I found the right element to affect, it immediately took it to red.

Now what I am playing with here is just this kind of selector tool just to do a little bit of troubleshooting. So, you just kind of see it and know, alright, this is the element now I need to go affect in my style sheet. So, I can copy that onto my clipboard. I am just going to click on that “entry—title a”; and, you need that period in front of it because that means it is a div-tag. “Entry—title a”—I am going to copy that on my clipboard, and if I really wanted to make that change happen inside of my website permanently, because right now I am just testing it, if I wanted to make that happen permanently, I would have to do into an area in my dashboard and go to a theme option’s area where an author hopefully has done this for you, at least. If he doesn’t give you that environment to easily change things, maybe he has given you something like this called a custom CSS box. This is the spot where you can go in and basically play around with overwriting his existing or her existing theme elements, right? So, if I wanted to, I could just enter down, drop in that that I have pasted. I am going to open the element with the curly bracket, close the element with a curly bracket, and then I am going to go ahead and just type in the new color code that I want in there. Color—you have to have a pound sign (#) CC1234 and put that little ; behind it there. And now if I save my options, now when I go to the front side of my website and click refresh, (I click refresh) and the page just reloaded, and now it is red permanently. It’s red, so that’s great. Now we know how to affect color.

Really, this video is going to be way too long if I show you how to do every single one of these things, but what I want to teach you is how to use that Firebug tool to find which element you need to go into to change. That’s how you do it. It’s that simple.

I am going to take you to another quick website and show you the line spacing issue that I am struggling with on this particular website. So, if go…let’s go to a page up here. Let’s go to, I think it was activities maybe that has a spot on there. Yeah! So, they wanted to use this really fun, kind of really whimsical font on their website, right? Alright, the problem is it’s very difficult to read, and they’re very adamant to stay with this because it is their brand. They want to use that font. So, one of the elements that I am teaching about today is called “letter spacing,” and you can add a little bit of padding or spacing between letters that allows your eyes to focus a little bit more clearly when you are using a font like this.

So, again, I am going to grab my Firebug element tool, click on that, and I am going to click that area so I know which spot in my CSS it is affecting that particular…I am going to try this over. It is kind of hard to see on such a small screen, but I am going to see if I can show you exactly what I want to do here. I am going to go to P which is paragraph, right? Anything in a paragraph mode should be affected like this. I am going to say letter-spacing. I am just going to say even 2 pixels. Look at that! Look when I come back over here now, how much clearer and easier that is to read. Isn’t that fantastic? But, if you don’t know that those options are even available, you don’t even know how to type them in, right?

Again, using Firebug with there’s just something where I am just basically doing a quick test to see if I am affecting the right thing, now I know I need to go into their stylesheet, go into the paragraph area and add in “letter-spacing: 2 px;”, right? That will affect everything in my paragraph mode across the entire website, not just on this page, but every single part of my website that has the paragraph mode in it. So, it affected this stuff down here, all this stuff. All of that looks so much better now, much easier to read in its spacing of lettering. Really, really great option there.

I am going to list down how to change your font family, your line height, your font size—I am going to list how to do all those different things, and I am going to give you other resources as well that help you and save time. Remember, remember, remember you have to have a custom CSS box area if you are not using a child theme. This is the area that you need to go into to add all these elements. Because if you ever what to update your website later on, you could lose all this functionality.

If your author has not given you a custom CSS box area, I want you to go to check out a plugin. I am going to put the link down below. You can get a plugin (um, let’s see if I can show you). It’s called custom CSS, that’s all it is, and you can (hold on, wait for it). I am going to log into my website really quickly so I can show you exactly what that looks like once you actually activate a plugin for custom CSS, it will be in your appearance area, custom CSS, and now it is just a simple plugin that basically gives you an area where you can add it yourself if the author was not kind enough to do that for you. Super, super, super important that you do this and super important that you get this.

If you have any questions at all, would you please consider leaving a reply in the feed here on YouTube? Or, shoot us a tweet over on Twitter. I will put the link in our Twitter handle below so that you can connect with us that way. If this is too much, if it is too fast, or if you’re going, “Kori, I have other questions,” would you consider giving us that question so that we can actually do a video for you or write a blog article for you.

We will see you next time on WordPress Wednesday. Check us out online. I will put everything in the description box below. Bye, y’all.