How to Change Font Size in WordPress – Make Your Website Look More PRO

How to Change Font Size in WordPress – Make Your Website Look More PRO

How to Change Font Size in WordPress – Change font size of a default body text, headings, blockquotes, image captions and sidebar titles.

This quick and easy step-by-step tutorial here is meant mostly for newbie bloggers. Why? Because I have found the following kind of interesting – Things that are trivial for some people might turn out to invincible challenges for others.

Therefore, they need tutorials like this one here. And I, for my part, am happy to provide one.

Not only that. Let me ask you – Have you stumbled across some pro site that you found just perfect – The colors are right, the design is clean, it’s font colors and sizes, everything, look excellent. You would like to follow their example. But how?

That’s why I wrote this quick step-by-step guide on changing font sizes in WordPress. I can’t cover everything here, of course. But, at least I can give you some tips and tricks that make your site look more professional.

[Sidebar: If you want to learn about my #1 work-at-home opportunitycheck out THIS! You’re gonna like this (Yes, I am using it since 2013).]

In this guide I will show you how to change:

  • custom.css file
  • a default body text
  • default blockquote fonts
  • default headings
  • image captions
  • default sidebar titles

So, here we go. First stop:


How to Change Font Size in WordPress – Custom.CSS

All the code that you need to change locates in the Style.css file. Style.css is the Stylesheet of your WordPress theme. However, it is not wise to make any changes to that file. Why?

Because:

  1. If you happen to mess things up, the original file will get corrupted, and your site will be affected. You don’t want that, do you?
  2. When your WordPress theme provider sends you a new theme update, all the changes you have made to Style.css will be lost.

That’s why WordPress gives you another file (called custom.css). That’s the place where you will do all the changes.

How to do it? Let me show you how I usually do it. Just follow my steps and you can do the necessary changes to your site.

Read Also: How to Create Website With WordPress – 4 Simple Steps

The Overall Process

Here’s the process of how to change font sizes of my WordPress site:

  1. For that, I need to open both style.css and custom.css files.
  2. I copy necessary parts (pieces of code) from the style.css into the custom.css file. (Note! I am careful NOT to change the style.css!)
  3. I make changes in the custom.css file.
  4. I save custom.css file.
  5. I refresh the browser window (i.e. my WordPress site) to see if the changes have applied.

So, step-by-step, let’s do it:

Open Style.css and Custom.css files

  1. I log in to my site’s WordPress Dashboard.
  2. On the left-hand side menu, I navigate to Appearance → Editor… and voila… I just opened the Style.css file. You should see the title of it above the editor window:Wordpress Stylesheet open
  3. In that Editor, you have the right-hand side menu. Scroll to the very bottom until you will see custom.css (under Style sub-title):where is custom.css in wordpress
  4. Open custom.css in a new browser tab.

If you have followed these steps, by now you should have both files opened in different browser tabs. Now you can start changing different font sizes. Let me show how I do it.

Because your WordPress theme is (probably) different from mine, your Style.css differs too. However, the main parts of it and the overall idea are still similar. Therefore, you should be able to find these places in your file and make the desired changes.

Just make sure you will not change the Style.css file. Each time I will do the same: I find the piece of code in the Style.css; I copy and paste this piece of code into the custom.css; I change the code in the custom.css file.


1. How to Change Font Size in WordPress – Body text

To modify the body text (i.e. paragraph) default font size I go to Style.css, press Ctrl-F (Search function) and type in “body”.

Find the place in the code where the word “body” is followed by opening brace. The default font characteristics (size, color, line-height, etc.) are defined between these opening and closing braces.

What I do is I copy and paste the whole piece of code (including the closing brace “}”!) from the style.css into the custom.css:

Here you can change the font size of your wordpress paragraph style

Style.css code

Now, in that custom.css I change the font size. In my case, the initial font size was way too small for me so I changed it from 16px to 20px:

Custom css file after the font size is changed

Custom.css file

If you want, here you can change the color of the default font, too. Only you need to know what the right hex code of the desired color is.  The hex-code of a color is a #, followed by 6-figure. Example: white: #FFFFFF, red: #FF0000.

Anyway, after making all the changes, I hit the blue “Update File” button of the Custom.css. After that, I refresh my website to see whether I am satisfied with the changes or not.


2. How to Change Font Size in WordPress – Headings

As you know, headings in HTML are defined by the tags H1, H2, H3, etc. Therefore, to change the font size of one or more headings, I work my way back to Style.css and find this block of code (in my case, it locates pretty much at the beginning of the file):

here you can change the headings sizes in style css wordpress

Again, I copy and paste the whole piece of code (including the closing brace) into the Custom.css and make the desired changes.


3. How to Change Font Size in WordPress – Blockquote

A quote, as you know, is a piece of content that you have got from someone else. If the quote is short, it’s not necessary to separate it from the other main body paragraph. However, if it happens to be a longer block of text, it’s better to separate it somehow – just to make it jump out from the body text.

That’s why WordPress offers a Blockquote function:

Blockquote function in WordPress Editor

Like zillions of others, though, I was not particularly happy with the initial blockquote design of my WordPress theme. In my opinion, the highlighting was just too weak and unimpressive. That’s why I decided to change it.

The code in the Style.css to do it looks like this:

the code to change if you want to modify the font size of blockquote in wordpress

As you see, in my Style.css there is no line in the code to modify font size. Therefore, you may want to write the line by yourself:

That's how to change blocquote font size in wordpress

In fact, as you see, I wrote another line to put it into italic.

Not only that. Just to give you a hint how to modify the whole blockquote I wrote two different versions. I modified

  1. font color
  2. background color
  3. left border color
  4. left border thickness
  5. padding at the left.

The modified code #1 looks like this:

how to change blockquote in wordpress

In this case, the blockquote design itself looks this way:

That's how blockquote looks like in wordpress

This time, however, I change the parameters and see how the code looks now:

Blockquote with dark background

And see how it appears in a blog post:

That's how blockquote with dark background looks like

Which of these two different blockquote designs do you like best?

 


4. How to Change Font Size in WordPress – Image Caption

To change font size of image captions I head over to Style.css and find the following piece of code:

Here you can change font size of captions in wordpress

Do you see the “font-size:11px” in the middle of the third line? That’s where you change the font size of the image caption but also its text color, background color, padding, etc.


 5. How to Change Font Size in WordPress – Sidebar Titles

To change Sidebar titles, I head over to Style.css and find this section of code:

Changing font size of sidebar titles in wordpress

Here you can change the font-size, color, line-height, etc. Just copy and paste the code into the Custom.css, make the changes and update the file.


 Conclusion

As you see, it’s not that difficult to make these simple changes to your WordPress website. It does not require you to know all the programming gimmicks. At the same time, these small changes can make a huge difference on how your website looks.

Do you want to learn how to build a website in WordPress, build traffic and start making legit income online?

Check my #1 tool to see if it suits you. It’s FREE, and you will have NO obligations!

Before You Go

Please let me know if this short tutorial was helpful? I mean, did help you answer the question, “How to Change Font Size in WordPress?” Also, if you had some other angle in mind, please drop me a comment below and I will do my best to help you out.

 

Related Articles

 

Leave a Reply

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