I love the fact that Showit enables a completely custom website, but still uses WordPress for blogging. As someone who provides blog writing services, though, I realized that some Showit designs make the blogs hard to read.

Change WordPress/Showit fonts

Using H2 and H3

Here’s the deal. When blogging, it’s important to divide your content into subsections. This makes it easier to skim and is important if you want people to actually read your content. This section is a prime example! It’s not just about how it looks, though! You also need to change the text settings when in WordPress. To create the look above for the text, “Using H2 and H3,” I changed the text settings in WordPress from paragraph to Heading 2. This changes the look, yes, but it also adds a hierarchy, which is important for SEO. We’re telling Google, this blog has a clear organization. This is a subsection. If for example, I needed to add a list within a list, that’s when I would use H3.

Understanding H3

See what I did there? The “Understanding H3” has a heading 3 setting, because this is a subsection within the “Using H2 and H3” section. Most Showit users won’t use H3 often when blogging, but it comes in handy. Just think of it like a book. H1 is the page title or post title of the blog. H2 are the chapters. And H3 are for subsections within the chapters.

The font dilemma

This is all fine and dandy until you publish your blog and realize that the font settings don’t look great. Perhaps the H3 text is bigger than H2, which doesn’t make sense. Or maybe the H3 text is a heavy script font that makes your blog hard to read. Defeats the whole purpose of blogging if you can’t read it, right?

Customizing the WordPress fonts

I am not a coder by any means, but there is a short bit of code you can use to customize the WordPress font. Thanks to Crystal Lee and Robyn Pigott of Eleventy7 Marketing for the code! I added the below to my site, but of course, you’ll want to swap out my font sizes, types and colors for your own!

h2 {
font-family: Crimson Text !important;
color: #242424 !important;
font-size: 34px !important;
font-weight: normal !important;
text-transform: none !important;
line-height: 1.2 !important;
text-align: left !important;
letter-spacing: .1px !important;

h3 {
font-family: Raleway !important;
color: #242424 !important;
font-size: 20px !important;
font-weight: normal !important;
text-transform: uppercase !important;
line-height: 1.8 !important;
text-align: left !important;
letter-spacing: 0px !important;

Showit/WordPress Font Tutorial

Need a step-by-step guide? Watch this!

How to Customize Showit Blog Fonts

  1. Olivia says:

    Thanks so much–this was so helpful! Looks so much better than the original font. Do you know why the code might be changing my title font though?

    • Lauren Kutschke says:

      In the Showit design for single blog posts, is your title marked as h2 or h3? Changing it to h1 should fix it, so long as you didn’t use the code to change the h1 settings.

  2. Shannan says:

    Hi! Found this helpful, however my paragraph text continues to bold once published for some reason. Any idea how to fix this?

    • Lauren Kutschke says:

      I would check your Showit design settings and the custom code of the blog itself. It might also be set to bold in the WordPress post itself! Showit support can sometimes be helpful in cases like this too.

  3. Laney says:

    Hi! I’ve been on multiple calls with Showit about how to do this and was given no answer other than “You’ll need custom CSS” – so THANK YOU this was so helpful!

  4. Molly says:

    This was so helpful! Thanks

Leave a Reply

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

Site Credits

Located in Fort Worth, Texas
© 2024 SALTED PAGES, LLC. All Rights Reserved.