URGENT Change Product Tab Font to Custom Font

Store Design
, ,

Topic summary

Goal: Change the Easy Tabs (product description tabs) header font on Shopify product pages to a custom font (“Resial Bold Condensed”).

Context: Tabs are rendered via a custom liquid snippet: {% render ‘product-description-tabs’, product: product %}. Easy Tabs is a third‑party app that creates tabbed content; CSS controls the visual styling.

Solutions proposed:

  • Add CSS in Theme settings (Customize > Theme settings > Custom CSS):
    .easytabs-container .easytabs-accordion-item .easytabs-header-text { font-family: ‘Resial Bold Condensed’; }
  • Alternative implementation path shared: edit theme.liquid and add code above . A screenshot was provided showing the applied result.

Latest updates:

  • OP confirmed the change worked and asked how to make the tab headings slightly larger, noting they appear too small on both desktop and mobile.
  • Multiple follow-ups were directed to helpers requesting guidance on increasing the heading font size.

Status:

  • Font family change appears resolved.
  • Font size adjustment remains unanswered; no code or setting was provided yet for increasing the heading size.
  • Discussion is ongoing with a key open question: how to enlarge the tab header text size across devices.
Summarized with AI on December 21. AI used: gpt-5.
1

Hi,

I have installed ‘Easy Tabs - Product Tabs’ app for my product pages & tabs for descriptions, sizing and materials under the custom liquid code - {% render ‘product-description-tabs’, product: product %} on each product page.

Instead of the current ‘mono’ font, I would like for the heading of each tab to show as my custom font of 'Font-family: ‘Resial Bold Condensed’

Website URL: https://duoarthouse.com.au/

2

Hi @duart2023
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.easytabs-container .easytabs-accordion-item .easytabs-header-text { font-family: 'Resial Bold Condensed'; }
3

Hey @duart2023

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723709175542.png
Moeed_0-1723709175542.png638×236 5.62 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

@Moeed Thank you!! Is there any way to make the headings slightly bigger?

5

Hi @Sangeetanahar Is there any way to make the headings slightly bigger? It appears too small on desktop and mobile view.

6

Hi @Moeed Are you able to please confirm if there is any way to make the custom font size slightly bigger in the code above?

7

Hi @Sangeetanahar Just wanted to follow up on the above. I’d love to be able to make the heading font size slightly larger.