January 14, 2020 57

How to Change Fonts and Text with CSS in WordPress

How to Change Fonts and Text with CSS in WordPress


Hello, Everyone. Welcome to another WordPress
Wednesday. I am Kori Ashton here at WebTegrity, 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 trouble-shooting
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 trouble-shooting. 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 style sheet, 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.

57 Replies to “How to Change Fonts and Text with CSS in WordPress”

  • Afterthought Farms says:

    I am very impressed with what a good instructor you are.I have two things on my site that I have struggled with all day.I'd like to place my secondary menu below the slider and I'd like to change the fonts for all of the menus.Is this something you have done a video on explaining yet?

  • ToryK13 says:

    The most helpful video I've seen as far as WordPress tutorials. +1 for being entertaining and having colour to your commentary. Too many monotone web developers out there, haha.

  • Kim Kaporis says:

    I'm a Marketing Coordinator at a nonprofit, and while my degree is in Mass Comm and Film, we do a little bit of everything here. We've been looking to change our websites to the WordPress platform, and that means I get to revisit CSS. I only took one class on it in college, so I was looking for tutorials on how to customize our theme.

    This video explained everything clearly, and I'm looking forward to watching more 'how to's' from WebTegrity. Thanks so much for sharing your knowledge with the rest of us! 🙂

  • April Swales says:

    Your videos are wonderful! It's nice to see someone who knows the info well explain it so clearly. Sometimes us non-tech nerds feel behind the curve and it can be a little embarrassing. Thanks for making it all make better sense!

  • Elisabeth Donati says:

    Thank you! Just fabulous. You are sooooo cute!!!

  • Claudia Liebenberg says:

    You are an AMAZING instructor, thank you for being absolutely Clear and Practical.

  • Krista Hall says:

    Thanks. Great video.

  • Bianca D says:

    What an awesome video!!! Thank you so much!

  • Nanda Janakiraman says:

    mam,nw i use zerif lite theme ,How to change fonts and text colour in customazing opitional like header font,page title…..pls tel me

  • Boo Lak says:

    HOW TO ADD URDU FONTS IN WORDPRESS THEMES PLZZZZ HELP ME

  • John Hingkung says:

    Amazing, you are my fav. web tutor on Youtube

  • Mathias Costa Magnussen says:

    one of the better videos

  • Lara H says:

    Hi Corey, thanks for the humour….loved the out-takes! I am helping a friend edit their site which is proving harder than I thought as the Author has hidden everything. Hopefully with your tutorials I can get what I need with a laugh along the way!

  • Jeff Duncmon says:

    This was fantastic. Very helpful. I would've never found the area to add my CSS. I originally added it directly to the page – the next day, I came back and it was GONE!! Drat! So I figured there must be an external style sheet . . . but WHERE???

    Thank you so much!! I am going to look for more of your videos about Word Press.

  • Tony Darbyshire says:

    I've just subscribed to Kori's WPWed. It's good to find someone who knows her 'subject' and can communicate that knowledge in a friendly and professional way. YouTube channels are full of really bad stuff, but this doesn't apply to Kori!

    Anyone looking to learn more about, as Kori describes it, 'nerd' stuff, would do well to watch and listen up! Thanks Kori, for your contributions to my learning and for being, dare I say it, pretty un-nerdy! 🙂

  • Mike Deville says:

    THANKS!!! But what does it mean when an attribute is lined out in the styles section of the inspector?

  • TeacherTrap says:

    Thank you SO much for this video!! You seriously just changed my life!! I had no idea about how to use that "inspect" feature and it's working like a charm to help me edit CSS. You rule!!

  • valhallasmine says:

    Yea, Sonic Sweeet Tea!

  • Rishabh Thakur says:

    Thank you thank you very much love your videos…. really 🙂

  • Chaplain Bob Faubel says:

    Thanks for your guidance. I am a graphics designer and use DTP for everything. WordPress is very hard for me but I will learn it one way or another. Your teaching style is very good. I love using fancy fonts and need to learn how to do this easier.

  • Víctor H. Flores says:

    thank you for this tutorial!

  • Zena Kiddie says:

    Great Videos WebTegrity! but im just wondering is there any other way of obaining 'Theme Options' without changing my theme ? I'm with wordpress.org
    Thanks for the help so far 🙂

  • sananda says:

    Thanks a lot for the video!

  • Annie Harrison says:

    Just what I needed thanks so much

  • Ted says:

    how to affect css to only one page?
    how to affect css to selected pages?
    how to affect css to all pages?
    Please make one video and show em all in it.

  • Ted says:

    All I have in my css part is
    (HTML part contains as <span style="font-family: ….">Title</span> )
    element.style {
    color: #0000ff;
    font-family: "arial black",sans-serif;
    font-size: 20pt;
    }
    Pasting it to Custom css does not work.
    What should I past to Custom css to make it work?

  • spleujo says:

    I don't see the link for "Custom CSS" when I look in the plug-in directory there are many plugins claiming to be custom css in one variety or another (4000+ results). Do you have an author name?

  • esperoart says:

    YES! THANK YOU! Finally my website looks exactly how I wanted. You are the best Kori! Thank you!

  • Schlomoh Brodowicz says:

    You are a terrific teacher !

  • Daniela Bossano says:

    Can you do a pagebuilder! You're awesooome!

  • Shivam Raj says:

    Thank you

  • Ted ahd says:

    what about "family"?

  • Me Lady says:

    FABULOUS!!!! Thank you.

  • Sam Oyadeyi says:

    Wow! You have always been very helpful to my career. Thanks a zillion times.

  • My Sweet Beautiful Life says:

    Doesn't work

  • MAMMA BEARS INTERNATIONAL- MONTESSORI SCHOOL says:

    a wounderful video you are a great teacher. thanks for the information 😃

  • Rev420 Official says:

    Great vids.

    Can you please do an updated tutorial? Firebug is no longer available

  • Heather Primerano says:

    Thank you so much for this excellent and clear tutorial. I was completely stuck on how to edit the default fonts in my WordPress theme and you made this easy to fix. 🙂

  • Awaken Sleeping Nation says:

    That was incredibly useful! The best part about it is that was the first time I've ever messed around with this stuff, but I didn't end up going to your site. Please, keep it up!

  • Shruti Gurav says:

    Thanks..very helpful vdo…bt can we add bootstrap code in custom css plugin to make it responsive.

  • Nuke Age says:

    You are awesome!

  • Nuke Age says:

    Hey Cory, do you know how Storefront theme's CSS works? Cause instead of having one font family they seem to list a whole lot of them next to the command. It's as if they were attributing a style to a whole set of things instead of one by one. And I can't even find the font-family element for the main navigation menu. Any tips?

  • Ryan @ WP Superheroes says:

    Your energy in this presentation is awesome. Thank you for taking a complex topic and making it feel approachable and easy to understand. This is going into our WordPress Google Fonts playlist: https://www.youtube.com/watch?v=xsIgAMRB-KQ&list=PLzFTFOPuPjmyGM-3tRExw1Pe5TCqyS_FM

  • The Peace Poets says:

    Hi, thanks so much for this video! Firebug doesn't seem to be in service anymore, is there anything else you could recommend? Thanks so much!

  • Vinay Wadhwa says:

    Ma'am I am completely comfortable in changing any CSS that I want, thanks to your videos. But can you please tell me how to change content(html) in a Theme. Like I used a theme in which some of options like Search Box were in German, I want to change them to English, but in Custom CSS we can only overwrite CSS not HTML, what's the solution for this??

  • mlobartPL says:

    Thank you for this tutorial!!! You are great!!!

  • Aparna Udaykumar says:

    Hi Kori, this was really really helpful. Thanks a ton!

  • Nduka Enuma says:

    @Kori Ashton, You are doing a Great Job! Please keep it up.

  • FKtdyvan 2016 says:

    I am trying to follow your instructions to change the font color of my site title. However, in the Dashboard under Customize the option of Theme Options is missing (doesn’t appear there). Is this normal for a WordPress Dashboard not to have Theme Options?

  • Kasheribbean / says:

    Wow wow! This is amazing! Thank you so so much!

  • shree ganeshayanama says:

    you are very Genius 🙂

  • T & R White says:

    Thank you for a great tutorial!!!!!

  • Tia Moore says:

    I'm trying to edit the font them in word press called satine. Is there a way to change the word satin to my company name instead

  • mazadi all says:

    thanks alot you are awesome always

  • bd692000 says:

    Kori,

    I just found your channel and wanted to say thank you. You create awesome content. I am now a subscriber. I don't know if you will even get this message but I was wondering what video recording software you are using. I love that you can shrink yourself and move yourself around like that. Thanks again for the information. I will be using it to troubleshoot a couple issues on my website.

  • Rachel Dumante says:

    can you change what the text SAYS instead of just the style? How would I go about changing what the text says instead of all the style options?

  • refused says:

    Thanks Ellen!

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.