Jump to content

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

Recommended Posts

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;
}

macron.png

Link to comment
  • Replies 7
  • Views 521
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

What's the link to your site?

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

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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.

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

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

image.png.e0567ad0efac57e3e5cc697c74cd4d7f.png

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.