How to change font of product titles on product pages

[hushbug]

Hi,

I uploaded my own font to my assets (Chomsky.woff) and would like it to be the font of my product title on all of my product pages. I would also like to change the header menu + dropdown to the same font (every other page shows the menu with the correct font except for my product pages).

I’ve tried several sets of code to do this and none of them have worked.

I tried this one at the end of my theme.liquid file:

{% if template.name == 'product' %}

{% endif %}

I tried this one in the middle of my theme.liquid file:

@font-face {
        font-family: 'Chomsky';
        src: url({{ 'Chomsky.woff' | asset_url }}) format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

And I tried this one at the bottom of my base.css file:

.product__info-container .product__title h1 {
    font-family: 'Chomsky';
}

These were all recommendations from people on this forum but none of them worked and I’m not sure why. Any help is appreciated.

Here is my site. I’m using Colorblock theme.

[EBOOST]

Hi @hushbug

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Layout/theme.liquid
3. add code below after

And you should remove @font-face that you added to base.css

[BSS-Commerce]

Hi @hushbug

• To use your font style, you have to install your font style to the main CSS file - “base.css”, not file theme.liquid.

• For the Product page, please modify file 'main-product.liquid" as follows:

• Then, add your style to the {% style %} tag.

.product__info-container .product__title h1 {
    font-family: 'Chomsky';
    }
    .product__title, .header__menu-item, a.mega-menu__link {
      font-family : 'Chomsky' !important;
    }

• Save your work and check the result:

• For other pages:

I hope that this can help you solve the issue.

[hushbug]

This didn’t work, is there something else I should try?

[hushbug]

Hey, this didn’t work, is there something else I should try?

[EBOOST]

Hi @hushbug

Sorry you should be update code below

And remove {{ ‘Chomsky.woff’ | asset_url }} this code in base.css. Because CSS file will not understand liquid programming language

[hushbug]

Thank you SO much!