How to Change Font Size on WordPress

In this tutorial, you will learn:

• How to modify the size of text within the post and page editor by using default theme styles.
• How to add custom CSS to globally modify text size on the entire web site.

Steps to Modify the Size of Fonts in WordPress

1. After logging into the WordPress Dashboard, click Pages. You can do the same for Posts.
2. Click the Edit link below a page.
3. Switch the Editor to Visual view.
4. Click on a paragraph that you would like to modify the text size for.
5. Choose from the list of styles from the drop down list. Click Update when finished.
6. The options that show up in the dropdown are defined by the theme being used. There are ways to override the styles on the web site as a whole, if you have a good reason to do so. To do this, you can create your own custom CSS.
7. In the past, it was suggested to create a child theme in order to create custom CSS. Version 4.7 of WordPress bundles with a Custom CSS tool that allows you to see your changes Live, and without the need for a child theme.
8. You can install the JetPack plugin, connect it with your WordPress.com account, and choose the Free plan if desired. Now, you can turn on Custom CSS by first going to Jetpack, then Settings, then Appearance.
9. Make sure that Custom CSS is switched on.
10. Go to the Appearance Menu, and then click Edit CSS. To continue, you will need to know what CSS classes and IDs to edit the CSS for, which are often theme specific. You can go to the Theme Editor to look at these styles by clicking Appearance and then Editor. You may also use more general selectors such as body.
11. Look at the code in the video, or on the web page with the written tutorial, to see how to edit the font size for the body tag. Essentially, you type: body, an open squiggly bracket, font-size, a colon, your desired value, a semicolon, then a closing squiggly bracket.
12. Click Save Stylesheet, then view your web site to see the changes.
13. Styles are notoriously cached, so if you do not see any changes, it may be for this reason. In general, pressing Shift+Ctrl+R, and possibly Shift+Command+R on a MAC, will clear the cache, hopefully allowing you to see your changes.

Code used within this tutorial:

body {
  font-size: 5rem;
}