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 (h1, h2, etc.) are not targeted unless they also use .title or .subtitle.

Key Settings

• Appearance 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.

• Appearance Settings > 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.

     

    

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.

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.