How do I apply my site's custom code font (with a macron) to the store section?

I have uploaded the following css code for custom fonts in my site and it has worked for all sections apart from the store. I have no experience with coding and found these codes online and that is how I have got this far.

I am using a Maori word in my site which requires a macron above the first letter a. The macron is working successfully on all standard sections. The font I am having to use for the store is defaulting the typeface for this letter.

I would like to change the font for the store for HEADINGS: POSTGROTESKREGULAR and PARAGRAPH COPY: POSTGROTESKLIGHT and I need the macron to work in this section too.

Below is the code I have used so far in the site and a screen grab of the issue.

If someone can please provide some code to fix this, that would be much appreciated, thank you.

@font-face {
font-family: 'KAPRASEMIBOLD';
src: url('https://static1.squarespace.com/static/6397af65592c201f58f39b2a/t/6399409badffcb522b221712/1670987931915/KapraNeuePro-SemiBoldRounded.otf');
}

@font-face {
font-family: 'POSTGROTESKREGULAR';
src: url('https://static1.squarespace.com/static/6397af65592c201f58f39b2a/t/639940bfb17a723edcbd8dd5/1670987968384/PostGrotesk-Regular.otf');
}

@font-face {
font-family: 'POSTGROTESKLIGHT';
src: url('https://static1.squarespace.com/static/6397af65592c201f58f39b2a/t/639940ab8a2c171209ddd7e9/1670987948461/PostGrotesk-Light.otf');
}
h1, h2 {font-family: 'KAPRASEMIBOLD'}
p, h3 {font-family: 'POSTGROTESKLIGHT'}
/* Header height */
.header-announcement-bar-wrapper {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
/* Shop list custom font */
section.grid-meta-wrapper * {
    font-family: 'POSTGROTESKLIGHT' !important;
}

What's the link to your site?

If you password protect it and provide the link + password, we can help you quicker 🙂

thank you. 🙂 how do i do that please? the site is currently in trial mode.

12 minutes ago, RebeccaBurt said:

how do i do that please?

Please see How to Post a Forum Question.

Did this help? Please give feedback by clicking an icon below  ⬇️

I answered a question about macrons the other day. One thing I've noticed is that not all the squarespace fonts are imported the same way. most of the google font ones have full stylesheets that import all unicode ranges (when required), but the typekit ones seem to be different subsets.

I found that if you find the right font link in your source you can change the subset_id of fonts that are brought back to include the full set (which includes the macron). 

this was the question I answered. The answer will probably be dependent on the particular font (and the particular weight/style of that font) so post the password to your site and we can find the right rule, but the other question I answered may be useful for you.

site login from incognito mode:

https://www.onetreehillnz.com/

pw: batcar1962

OK, your custom fonts are fine, but the heading font for the products collection is defaulting back to squarespaces "proxima nova" font (which doesn't show the macron - this is similar to the point in the other question about macrons that I answered).

So all we really need to do is make sure that we prioritise your font above others. so just add !important after your rule that sets h1 and h2 to your font. leave all the other code you've got the same but change the h1,h2 to 

h1, h2 {font-family: 'KAPRASEMIBOLD' !important }

and you'll get your nice font on the product page

That worked! Thank you so much I really appreciate your help! 😀