Update font

Store Design
,
1

I am on Prestige theme and want to update my product name font on all my collection, product, and homepage to Avenir font (an exisiting font already on my website). Plus also update my add to cart font on all product pages to Avenir.

IMG_5377
IMG_53771206×2622 239 KB

IMG_5378
IMG_53781206×2622 236 KB

2

Hi, since Avenir is already being used on your theme, this can usually be handled through the theme’s typography settings first.

In Prestige, it’s worth checking Theme settings → Typography to see if product titles and buttons can be set globally there.

If those options aren’t available, it may require a small CSS adjustment to target product titles and the add-to-cart button across templates.

3

Did you mean Arsenal as I do not see Avenir loaded at your site?

You have this code added to your layouts/theme.liquid:

    <style>
      .h1,.h2,.h3,.h4,.h5,.h6,.button {
        font-family: "the-seasons", sans-serif !important;
      }
    </style>

Removing this will reset most of your headings back to Arsenal.
I’d do this an then rather target those elements you’d want to have in “the-seasons”.

4

Hi @houseof9

Set Product Title Font to Avenir (Everywhere)

This will affect:

  • Collection pages

  • Product pages

  • Homepage featured products

File to edit

Online Store → Themes → … → Edit code → assets/theme.css
(or base.css / theme.scss.liquid depending on your Prestige version)

Add this at the bottom of the file:

/* Product titles - Avenir */
.product-item__title,
.product-meta__title,
.product-title,
.card__title {
  font-family: "Avenir", "Avenir Next", Helvetica, Arial, sans-serif !important;
}

Change “Add to Cart” Button Font to Avenir (Product Pages)

Add this CSS just below the previous code:

/* Add to Cart button - Avenir */
.product-form__add-button,
.product-form__add-button span,
button[name="add"] {
  font-family: "Avenir", "Avenir Next", Helvetica, Arial, sans-serif !important;
}

This applies only to product pages, not cart or checkout.

If Prestige Uses CSS Variables (Newer Versions)

Some newer Prestige versions define fonts like this:

:root {
  --heading-font-family: "Avenir";
}

If you see something similar in:

  • settings_data.json

  • theme.css

:backhand_index_pointing_right: Do NOT replace it unless you want to change all headings site-wide.

Your current request is product titles + add to cart only, so the CSS above is the correct approach.

Why This Is Safe

  • Uses existing font (no loading issues)

  • Doesn’t affect body text

  • Doesn’t break theme updates

  • Easy to revert

5

@houseof9 can you please share this page link?

6

Thanks, l tried this in my theme.css section and it did not update unfortunately

7

website is www.houseof9.com.au

8

Hi @houseof9
You should remove the code first.

image
image1073×171 15.7 KB

Then add the code in your theme.css file

/* Product titles - Avenir */
.product-item__title,
.product-meta__title,
.product-title,
.card__title {
  font-family: "Avenir", "Avenir Next", Helvetica, Arial, sans-serif !important;
}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

9

Hi @AnneLuo

Try this code.

.h1, .h2, .h3, .h4, .h5, .h6, .button {font-family: “Avenir”, “Avenir Next”, Helvetica, Arial, sans-serif !important;}
10

@devcoders Yes, it`s better.

11

Hi Anne, that code you are telling me to remove is not in my theme.css file. Could it be located elsewhere?

12

Already here – Update font - #3 by tim_1
Also – you do not have Avenir setup, so what font you want to use?

13

Hi, @houseof9
You can search in the code editor

image
image1348×478 75.3 KB

image
image937×377 24.8 KB

14

Hello @houseof9

Update Product Title Font to Avenir Across the Store (Prestige Theme)

Since Avenir is already available on your site, you can apply it to product titles using a small CSS override. This will update product names wherever they appear, including:

  • Collection listings

  • Individual product pages

  • Featured products on the homepage

Where to make the change

Go to:
Online Store → Themes → … → Edit code → Assets

Open your main stylesheet:

  • theme.css, or

  • base.css, or

  • theme.scss.liquid
    (depending on your Prestige theme version)

Scroll to the very bottom of the file and add the following:

/* Use Avenir for product titles */
.product-item__title,
.product-meta__title,
.product-title,
.card__title {
  font-family: "Avenir", "Avenir Next", Helvetica, Arial, sans-serif !important;
}

Change the “Add to Cart” Button Font to Avenir (Product Pages)

To match the product titles, you can also update the Add to Cart button typography on product pages only.

Add this directly below the previous CSS:

/* Use Avenir for Add to Cart button */
.product-form__add-button,
.product-form__add-button span,
button[name="add"] {
  font-family: "Avenir", "Avenir Next", Helvetica, Arial, sans-serif !important;
}

This targets only the product page purchase buttons and does not affect the cart or checkout.

Note About Newer Prestige Versions

Some newer versions of Prestige define fonts using CSS variables, for example:

:root {
  --heading-font-family: "Avenir";
}

You may see this in files like theme.css or settings_data.json.
Changing that value would update all headings site-wide, which isn’t needed for your request.

Using targeted CSS selectors (as shown above) keeps the change limited to product titles and buttons only.

Please hit Like and Mark it as a Solution if you find our reply helpful.