Larger Font for My WordPress Website

(Last Updated On: December 7, 2017)

The problem: small font

The font in my new WordPress website was too small. This post tells how I changed that to a larger font.

I use the Twenty Sixteen theme. If you have a different theme, these instructions might not work for you. But then again, they may work. Try them out.  After all, the Features screenshot below says that the font changes stay with your website even after you change themes.

Three systems, one should work

I’ve used three different systems for increasing the font size throughout the WordPress website:

  1. I just used the first (web host) system & it worked perfectly.
  2. I couldn’t figure out how I had done the second system in the past.
  3. The third system broke down after a while. But, I’ll give you all 3 systems anyway.

System #1

Using styles.css to increase font size

  1. Go to list of your domain names in your web host’s website. I use LiquidNet Ltd Hosting. To see the list, I clicked on the Files tab in the horizontal menu. You also need to know that my WordPress theme is Integral Pro.
  2. The domain name I was using was growinglove.club. So, I double-clicked thusly: growinglove.club > wp-content > themes > integral-pro-child. Right-click on style.css and select “edit with plain text editor”.

Because this was a new child theme, all I saw was the head of the style.css file you see by point #1 above.

Then I

  • Added the body code you see by point #2
  • Clicked the Save icon. (See blue icon with pink box around it above)
  • Cleared the cache

Now the regular page font & font beside bullet points are the same size. Note that you may have to tweak that 116% up or down a bit to make it exactly the same size.

System #2

1. Appearance > Editor

Caution: Do this in your child theme, not your parent theme.

Click on Appearance > Editor. That should immediately give you your theme name followed by style.css. If that does not show up, go to the bottom of the right-hand column. Click on style.css.

2. Add font code to body code

Scroll down until you see the body code. Add font-size: 120%; or whatever percentage by which you wish to increase the font size.

3. Click Update File

Click blue Update File button. Refresh a page to see if your font indeed is larger.

4. Heading & bulleted point sizes

The above 3 points will make the regular body font larger. However, it will not take care of your heading & bulletedpoint sizes. This is how to increase the size of your H2 & H3 headings and your bulleted lists:

In your dashboard go to Appearance > Customize > Additional CSS. Add the snippets below.

.entry-content h3 {

   font-size: 20px;

}

.entry-content h2 {

   font-size: 30px;

}

.entry-content li {
font-size: 16px;
list-style-type: disc;
line-height: 1.6;
}

You may want to move the font size up or down a few pixels. Experiment.

Then click the Save button and click the black X to close the Appearance window.

Bulleted lists

Note that this solution does not take care of the small bulleted list problem. To increase the size of the sub-bulleted points, add a font-size snippet like you see in this screenshot.

If you figure out how to solve the small main bullet point problem, please respond in the comments window.

System #3

Using a CSS plugin

1. Install Custom CSS and JS WordPress plugin

larger font

In the black dashboard go to Plugins > Add New. Search for Custom CSS and JS. Install and activate it.

Read the special features of this plugin in the screenshot.

2. Go to Appearance > Custom CSS

After you have installed the plugin, it may or may not appear under Appearance > Custom CSS. It could be one of the main titles in the black column. Wherever it is, click on Custom CSS.

If Custom CSS is not under Appearance, it will be in the main black column under the name Custom CSS & JS.

 

4. Click on Add Custom CSS

larger font

larger fontClick on Custom CSS & JS > Add Custom CSS. The screenshot on the right points out the code that should be replaced. (Thank you, plugin authors, for making the instructions so easy to follow.)

5. Add code & publish

Replace the code referenced in point number 4 above with

input[type=”text”]
{
font-size:16px;
}

You may want to change the 16 with a different font size.

YouTube video

The YouTube video below may shed more light on adding the CSS code that gives you a larger font.

 

Related page

W3Schools CSS font discussion

Leave a Reply

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