Update font

[houseof9]

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.

[damiwise_webtouch]

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.

[tim_1]

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”.

[devcoders]

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

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

[suyash1]

@houseof9 can you please share this page link?

[houseof9]

@devcoders

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

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

[houseof9]

website is www.houseof9.com.au

[AnneLuo]

Hi @houseof9
You should remove the code first.

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!

[devcoders]

Hi @AnneLuo

Try this code.

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

[AnneLuo]

@devcoders Yes, it`s better.

[houseof9]

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

[tim_1]

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

@tim_1

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”.

[AnneLuo]

Hi, @houseof9
You can search in the code editor