How to Customize Showit Blog Fonts

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.

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!