InMotion Hosting Support Center

Changing fonts in WordPress usually means that you're changing the font size, making it bold or using italics. To keep things simple, we will be making adjustments to the font size in a WordPress post or page interface. We will also use the CSS editor that is provided with your WordPress Administrator Dashboard to show how you can change the size of the header fonts for the theme.

Changing the header font sizes will require that you modify the theme Stylesheet. We will only be showing how to change font sizes for the headers of your pages or posts to keep things simple. Note that you when you make changes to the Stylesheet, you should consider using a child theme. This prevents theme updates from overriding your changes.

Changing Font Size within a Page or Post
  1. Login to the WordPress Administrator Dashboard.
  2. Add a New Post/Page or Edit an existing Post/Page
  3. Open tool bar

    Normally, when you're working with a post or a page in WordPress, you will see that the visual editor has a menu of different items such as Bold, Italics, bullets and other options that you can use to format your text. As per the screenshot at right, click on the far right icon in order to open what they call the "kitchen sink". This opens all of the available options within the visual editor.

  4. Change font size

    Highlight and select existing text that you want to change, then click on the drop-down menu that is labeled "Paragraph". This option lets you select six different header sizes, or an option called "pre". Each of these options will change the size of the font. You can also select one of these options before you start typing in order to use that particular size.

Changing the Font Header sizes in the WordPress Theme Stylesheet

As noted above, it should be stressed that if you are not using a child theme, then a theme update will overwrite any changes that you make directly within the theme's style.css file.

see different header font size

You may find that you want to change the size of the header font within your theme. This can be easily done by editing the Style.css file with the editor that WordPress provides in the Administrator. The screen shot at right demonstrates the difference in font size you can set by simply editing the CSS.

  1. Login to the WordPress Administrator Dashboard.
  2. In the menu at left, click on Appearance
  3. In the menus that appear under Appearance, click on Editor
  4. You will then see the Editor window appear with a column of files listed to the right
  5. Scroll down the list of files until you see the Styles section - it will be close to the bottom of the list. Click on the style.css file. This will open the file in the editor
  6. Change font size

    If you are not familiar with CSS, do not worry. However, also be careful not to accidentally delete or change options within the CSS file. Scroll down until you find a section where you see "h1 {".

  7. Change font size

    In this are, you will look for the line of text that reads, "font-size: 26px". The "px" or pixel value may vary depending on the header. H1 is the largest and the font gets smaller as you descend. Change the font-size value as per your needs. Remember that a very large font may cause some overlapping with images or graphics within your WordPress site.

  8. Click on Update File in order to save any changes

Be cautious when making changes within the CSS for your theme. You should always immediately check to see the effect of the change on your website.

Was this article helpful?
You are viewing Section 11: Changing the Font Sizes in WordPress
Section 10: Changing Colors in WordPress
n/a Points
2018-02-18 8:44 am

Thanks for this. Can you tell me how to change the actual Page Paragraph font size - so not a header but the ordinary font - I can't seem to find an option for this in the CSS editor...I'm using Alante Blue theme. Thanks. 

Staff
1,173 Points
2018-02-19 12:08 pm
To change the font size for the paragraphs on the site you would want to edit the CSS section for the paragraph tags "

" or find the div your theme is using for the areas you want to change and add the font-size attribute to the div.

n/a Points
2017-10-23 11:07 am

Thank you for your article. When I get to the stage of or editing pages I get the intro code with author, etc, but none of the code to engage with. I could cut and paste from my GoDaddy file manager, but you say that it should show in the field by oopening. I opened my index page then Appearance, Edit, and I get  noe code except into. I would send a screen shot but I do'nt see that option here.

Thanks for any help you may be able to provide. RW Huntley.

Staff
10,815 Points
2017-10-23 11:32 am
Thanks for your question. You will want to make sure to click Appearance > Editor. Then, make sure that you edit the stylesheet. As mentioned above, it is wise to complete this in a child theme.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

4 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!