How to Use Multiple Fonts in One Text Box on Showit

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.

Why You Shouldn’t Break Your Sentence Over Multiple Text Boxes

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.

Step-by-Step Instructions on How to Use Multiple Fonts in One Text Box on Showit

Step 1: Combine All Text into the Same Text Box

Start by ensuring that all the text you want to style is in the same text box on your Showit design stage.

Step 2: Access the HTML Editor

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.

Step 3: Use Custom <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.

Step 4: Save Your Changes

After wrapping the specific words, save your changes to see the new fonts in action.

Important Requirements

⚠️ 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.

How to Determine the Font-Family Name to Use

For Google Fonts

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.

Font Variations

For variations like italics or different weights, specify these settings as shown below:

• Italics: font-style: italic;
• Bold: font-weight: 700;

For Custom Fonts

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: font-family:"Modern 1820";

Adjusting Font Size

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.

Q: Should I update my entire website by adding this code?

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.

You Should Update If:

1. Keyword Importance: If you’re breaking up keywords that are crucial for your SEO across multiple text boxes, then updating your website with this code is a priority.
2. Headers and Titles: These are often the first things search engines look at. If they are broken up, it might be worth the effort to go back and fix them.

When Is It Less Urgent?

1. Less Important Text: If the text is not keyword-rich or not critical for SEO, then it might not be worth the time and effort to go back and change every instance.
2. Time and Resources: SEO is just one aspect of your website. If updating the text boxes will consume too much time that could be better spent on other high-impact tasks, then it might not be worth it.

Moving Forward

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.