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

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.

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>Copy

*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>Copy