Picture of Specifying a Separate Font for Titles and Subtitles

Specifying a Separate Font for Titles and Subtitles

This feature lets you use a dedicated font for titles across your storefront—without changing your body text or other typography. It’s designed to give you brand-forward headings while keeping the rest of your content readable and consistent.

 

  • Scope: This setting is available for the Arone theme only.
  • Default: Disabled by default to protect existing site styling.
  • What it changes: When enabled, a new Title and Subtitle Font selector appears. The selected font is applied only to elements using the .title and .subtitle classes.
  • Note: Semantic header tags (h1h2, etc.) are not targeted unless they also use .title or .subtitle.

 

Key Settings

  • Enable separate title font?

    • Options: Enable / Disable

    • Default: Disable

    • What it does: Turns on the ability to choose a different font for titles and subtitles across the site.

    • Why it’s off by default: To avoid unintended changes to existing sites.

  • Title and Subtitle Font (visible only when the toggle is enabled)

    • What it does: Lets you choose the font applied to elements with the .title and .subtitle classes.

    • Impact: Affects titles and subtitles site-wide; does not change other text or raw h1–h6 elements unless they carry the relevant classes.

  • Where to find it: In Appearance Settings. In Arone, you’ll see Enable separate title font? near existing appearance options.

     

Use Cases

  • Brand-forward headings: Use a bold display font for titles, while keeping body text in a highly legible font.
  • Seasonal or promotional styling: Switch heading fonts for a campaign without touching body typography.
  • Gradual redesign: Keep the toggle off while you prepare styles, then enable when ready—minimizing risk to live styling.
  • Manual A/B comparisons: Quickly compare heading fonts by toggling the feature and selecting alternatives.

Step-by-Step Implementation Guide

  1. Confirm theme

    • Make sure your site is using the Arone theme. This setting is not available in other themes.

  2. Go to Appearance Settings

    • Open Appearance Settings.

  3. Locate the toggle

    • Find Enable separate title font? (the QA plan notes it appears near Background Color in the layout).

  4. Enable the feature

    • Set Enable separate title font? → Enable.

    • A new setting, Title and Subtitle Font, will appear.

  5. Choose the title font

    • Open Title and Subtitle Font and select the font you want for titles and subtitles.

  6. Save your changes

    • Save/apply settings to update your storefront.

  7. Verify the result

    • Browse key pages (home, category, product, CMS pages) and confirm:

      • Elements using .title and .subtitle now display the chosen font.

      • Body text and other elements remain unchanged.

      • Raw header tags (h1–h6) are unaffected unless they also have .title or .subtitle.

      • NOTE: You may need to clear your cache before these changes are seen on your site.

Incomplete
Alternate Search Terms
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.