Showcase Theme: change font in one section only

Store Design
, ,

Topic summary

Goal: Apply the “Lucia” font only to product titles on the product page and on product cards in collections, with control over font size. The theme editor currently allows only global fonts (all headings vs. body).

Early suggestion: A CSS snippet to change .section-heading h2 { font-size: 1.8rem; } which affects all headings and does not meet the targeted-scope requirement.

Proposed targeted fix: Add CSS at the end of Assets > styles.css to apply Lucia only to product titles:

  • .product -block__inner span.title,
  • .product-area .product-area__details__title {
    font-family: Lucia, serif;
    }
    Participants note you can also include font-size in the same rule to control sizing specifically for these titles.

Customizer option: One responder says enabling font changes via the Theme Customizer would require additional coding and offers to implement it.

Status: A concrete CSS approach was provided; no confirmation from the original poster that it solved the issue. Code snippet is central to the solution; no images or other attachments involved.

Summarized with AI on December 26. AI used: gpt-5.
1

Hi there,

I am using the Showcase theme and would like help with the following.

the site I am working on is www.mateagluscevic.com

I would like to change only these two to the “Lucia” font:

  1. product title on the product page

  2. product title in collections (on product card)

I would also like to have control of the font size.

In the theme editor I only have the options to change font for ALL the titles on the site.

Thanks for your help.

2

your all heading product page and collections page titles font size is change with this code

.section-heading h2{
   font-size: 1.8rem;
}

This time all your title font size is 1.8rem
You can modify the size of this title in your own way

if you change this font size after add this code in your edit code > style.css file

3

thanks but this doesnt adress how to assign a different font to the product page and to the product titles in the collections. Currently the theme editor will only allow me to assign two fonts, one to “all headings” and one to "body.

I want to assign the lucia font only to product page heading, and product title in collections.

4

Hello @pralinepanini
here is the css you can add in your styles.css file
Go to online store ---------> themes --------------> actions ------> edit code-------> assets-----> “styles.css” file and add this CSS at the very end

.product-block__inner span.title,
.product-area .product-area__details__title {
        font-family: Lucia, serif;
}

if you want you can change from Customize then we need to do some code so you can change from the Customizer
Please let me know

5

You will add font family and font size in it, all of them will be judged only in product page heading, and product title in collections.