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
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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

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.