Skip to main content
Changing Website Font Using Theme Tweaker

Learn how to update font of your storefront without directly editing CSS.

Alex avatar
Written by Alex
Updated this week

⚠️ Requires:

– X-Cart 5.5.1 or later

Theme Tweaker add-on 5.5.1.13 or later

Introduction

In our previous article, we showed you how to adjust colors of your store and choose a color palette that encourages customers to purchase your products. Now, let's take it a step further with fonts. We'll explore how typography influences brand perception and guide you through the process of adjusting fonts in X-Cart.


Before You Start

Ensure the Theme Tweaker add-on is installed and enabled.


Why Fonts Matter?

Typography, just like color, plays a key role in how customers navigate your online store, make purchasing decisions and perceive your brand.

Site Navigation: Clear fonts make it easy for customers to read key information like product descriptions, prices, and action buttons. A clean, simple font helps customers to navigate your site quickly, especially on mobile devices.

Purchasing Decisions: Hard-to-read or inconsistent typography can drive customers away. Many unsafe websites often have mismatched or poorly chosen fonts, and people have subconsciously come to recognize this as a red flag.

Brand Perception: Fonts also set the tone for your store and signal what customers can expect. The right font speaks to your target audience and aligns with your pricing segment, acting as a gatekeeper to attract the right customers.

Let’s explore a few examples of how fonts can convey certain feel and perception:

Verdana

Great for large catalogs or mobile-first designs, this font is easy to read and perfect for off-road gear or heavy-duty parts stores. It conveys reliability and toughness.

Helvetica

This font adds a refined, professional touch to the website. Perfect for luxury or custom parts store. Very sleek and modern.

Arial

Easy to read and universally accessible, making it a solid choice for mainstream automotive parts or accessories. It gives off a straightforward feeling.

Open-Sans

Neutral and versatile, ideal for a clean, simple design. It’s a great choice if you're aiming for clarity and functionality.

As you can see, well-chosen typography can significantly influence the perception of your store and help communicate your brand’s personality.

Next, let’s overview how you can change the font of your X-Cart store.


Changing Your Store Font

To set a different font for your website:

  1. In your X-Cart admin area, go to DesignThemes.

  2. Click Customize Storefront to open the Storefront Builder.

  3. In the sidebar menu on the left, scroll down to Advanced Settings.

  4. Enable Custom CSS toggle. Then click the pencil icon ✏️ next to it.

  5. Click Save changes , if required.

Finding Font Family selector

On the next page, find the Font Family selector. You can select from five preset options:

  1. Sans-Serif

  2. Open Sans, Sans-Serif

  3. Open Sans, Helvetica, Verdana, Sans-Serif

  4. Helvetica, Arial, Sans-Serif

  5. Monospace

Font Family selector location under Fonts section

Why Some Options Have Multiple Fonts?

Options 2–4 list multiple fonts in order of preference. If the first isn’t available on a customer’s device, the next is used automatically (e.g., Open Sans → Helvetica).

For the most consistent look across devices, we recommend Option 1 (Sans-Serif), which also serves as the default fallback for other options.

Live Preview

As you make changes, you'll see a live preview of how the font looks on your store. This allows you to adjust and refine your choices across different pages.

When you're done, click Save in the top-right corner of the Storefront Builder page.


Can't find answers you're looking for?

Email us at support@x-cart.com. We will be happy to help!


Did this answer your question?