How to Add a Single H1 Header With Different Fonts on Your Showit Website the Right Way

Enjoying these free resources?

Your support helps keep this site running and growing!

We all have, at some point working with ShowIt, come across a scenario where we want to create a header that contains a phrase that we want to emphasize using a different font, or color. What ShowIt designers generally do is create separate text boxes for separate portions of the header and drag and place them in a way that forms the header sentence.

While there seems to be nothing wrong from the outset, this is not good SEO practice. While we may read it as one singular sentence, Google bots decipher it differently.

I have thus created this tutorial to show you how you can properly create your H1 header inside a single text box, and still have it the way you want it to look.

While I generally do a step-by-step blog post for our tutorials, I felt this particular tutorial could be much better explored, understood and explained in a video.

How to create H1 Headers the right way in ShowIt | Multiple font headers in ShowIt

Codes Used:

Anakin is your <span class="otherfont othercolor lineofitsown">next-level photographer</span> from Portland, Oregon


<style>
.otherfont{
font-family: 'Your Font Name Here';
font-style:normal;
font-weight:normal;
}

.othercolor{
color:#fafafa; /*REPLACE WITH YOUR DESIRED COLOR*/
}

.lineofitsown{ /*DELETE IF YOU DO NOT WANT TEXT IN SEPARATE LINE*/
display:block;/*DELETE IF YOU DO NOT WANT TEXT IN SEPARATE LINE*/
}/*DELETE IF YOU DO NOT WANT TEXT IN SEPARATE LINE*/


/*DELETE FROM HERE IF YOU DO NOT WANT CUSTOM FONT SIZES IN DESKTOP AND MOBILE*/
@media screen and (max-width:981px){
.otherfont{
font-size:20px;
margin: 12px auto;
}
}
@media screen and (min-width:981px){
.otherfont{
font-size:80px;
margin: 30px auto;
}
}
/*DELETE UP TO HERE IF YOU DO NOT WANT CUSTOM FONT SIZES IN DESKTOP AND MOBILE*/
</style>

*FOR CUSTOM FONT USERS ONLY*

Copy and paste this code replacing font names and source url in the HEAD section of the page under ADVANCED SETTINGS

<style>
@font-face{
font-family: 'Your font name';
src: url('link to your font file');
font-style:normal;
font-weight:normal;
}
</style>


Enjoying these free resources?

Your support helps keep this site running and growing!

5 1 vote
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

YOU MAY ALSO LIKE

Showit Button Ripple Effect on Click

Want to make your Showit button pop with a fun, interactive effect? With this easy custom code snippet, you can add a beautiful ripple animation that starts exactly where you click on your Showit button. It’s a simple way to make your site feel more dynamic and...

Add a Confetti effect to your Showit Page

Looking to add a fun, celebratory touch to your Showit website? A confetti effect is a great way to delight your visitors—whether you’re announcing a sale, celebrating a milestone, or a thank you page after form submissions. The best part? You can do it in just a few...

Grow or Shrink a Logo on Scroll

Creating a dynamic logo that responds to user scrolling is a popular web design technique that enhances user experience and adds visual polish to websites. This effect typically involves shrinking a large logo in the header as users scroll down, making more room for...