WordPress makes it easy to make changes to the fonts for both headings and text – and this quick tutorial explains how to use headings, and provides instructions for customizing your headings and text across your entire website.
I recommend you make adjustments right on this page, while looking at the sample text below, so you can see the headings and text updates for you in real-time.
Website Font Best Practices
A heading tag (h1, h2, h3…) is used to define the formatting of a line of text. The text you are reading now is the paragraph text. The heading above is using the H2 tag.
Simply put, “Text” describes the default paragraph text on your website. The sample text below also describes common uses of these headings.
📌 TIP: If you haven’t chosen your fonts yet, I recommend checking out fontpair.co and then taking note of what you like. You can find most of the fonts you need right here on the website. If you are bringing your own font, create a ticket at support@buildwithmaple.com so we can install it for you.
Customize Your Headings
When you’re setting up heading and paragraph styles on your website you’ll want to be able to see the changes you’re making so you can get it just right.
First, you need a test page or post where you can have all the heading and paragraph styles available to look at. Then, as you adjust the dial you can watch how they change.
STEP 1: Click the “customize” button in the top bar, then click “general” and then “headings”. You can click “text” when you’re ready to adjust paragraph (or body) text.
STEP 2: Add your fonts and adjust font sizes.
📌 TIP: When you make changes in the customizer, it changes across the entire site. This is preferred to making changes inside each individual post (or module) because it allows you to make changes in bulk across your whole site.
h1 is for the article title only, so don’t use it
Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
h2 is only used when there are multiple sections with subheadings
Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text.
h3 is for most subheadings
Here is some placeholder text that you can use when testing the “text” area of your settings. Also, it’s helpful to see headings in the context of their accompanying body text.
h4 if you need it
h5 if you need it
h6 if you need it
Now that you’ve tested and chosen headings, you can move on to editing other areas of your website. Remember, you can always make changes in real-time, but those changes happen across your entire site. This is the best part about working with these settings.
Learn more about Typography
This is a vast and fascinating topic to learn more about. This 6-minute video is a fantastic overview, showing some important things to consider when choosing fonts for your website.
