Want to use multiple fonts in one text box on Showit to give your website an extra zing?
You probably already know how flexible Showit is to design websites. But with these flexibilities sometimes come issues with SEO.
Showit now allows you to have multiple designs in the same text box, making it easier for search engines to understand your content while also creating attention-grabbing designs.
In this article, we’ll guide you through the step-by-step process of achieving this design feat without compromising your SEO.
Before we dive into the tutorial, it’s essential to understand why keeping your text together in one text box is crucial for SEO.
Breaking your sentence over multiple lines or text boxes can make it harder for search engines to understand your content.
This could negatively impact your website’s SEO performance.
Therefore, it’s best to keep your text together, especially for important content like headers.
Start by ensuring that all the text you want to style is in the same text box on your Showit design stage.
Select the text box by clicking on the box. Hold down the Option or ALT button and double-click on the text box to open the HTML editor.
<span> Tags for Styling
In the HTML editor, wrap specific words with a custom
<span> tag that includes details for styling. Here’s an example:
🔥 Tip: If you need help with adding the coding, use ChatGPT.
After wrapping the specific words, save your changes to see the new fonts in action.
⚠️ Font Availability: The font must still be used somewhere else on the page for it to load via code. If necessary, place a text box with that font somewhere on the page and set it to 0% opacity to ensure the font file loads.
If you’re using a Google Font, use the Family name without any style wording like “Bold.” For example, for Roboto Bold Italic, you’ll just use “Roboto” as the font-family name.
For variations like italics or different weights, specify these settings as shown below:
If you’ve uploaded a custom font, reference the specific font name you’ve defined as the font-family name. For example, if you named your custom font “Modern 1820,” you would use it like this:
You can adjust the font size using ’em’ values, which work well across both mobile and desktop layouts. For example,
font-size: 1.5em; would make the text 1.5 times the current font size.
A: It depends.
While the code is beneficial for SEO and design consistency, whether you should update your entire website depends on the specific circumstances and how they align with your overall digital strategy.
For future updates or new content, implementing this code from the start can save you time and help with SEO. This way, you’ll be proactively avoiding the issue rather than having to go back and fix it later.
Using multiple fonts in a single text box on Showit can add a layer of sophistication to your website design.
Just remember to keep your text together for SEO purposes and follow these steps to make your typography as engaging as possible.
Caitlin Christensen is an expert in digital marketing and search engine optimization (SEO). Owner of Creative SEO Coach. She specializes in optimizing websites built on popular web building platforms Showit and WordPress. With over 8 years of experience in the industry, Caitlin has helped countless small businesses and organizations improve their organic visibility on search engines.
Creative SEO Coach
Meet Creative SEO Coach, your dedicated specialist in all things SEO for Showit!
Creative SEO Coach offers Showit SEO Services, SEO web design and an in-depth SEO Courses.
Blogging 101 Course
Showit SEO course
Showit SEO Services:
- SEO Starter Package
- 7-Day SEO Intensive
Showit SEO Checklist
Terms & Conditions
Book strategy Call
ⓒ Creative SEO Coach 2023
Website designed by Creative SEO Coach
ChatGPT Prompts for SEO
Showit Discount Code
SEO Web Design
White Label SEO