Custom font will not appear and is using a different custom font!

Site URL: https://www.peekneek.com/

Hey everyone, 

My client has just messaged me today saying that her Paragraph font (AkzidenzGroteskStd-Bold) is now appearing at the Header font (Retro60Prime).

I've taken out the custom code and entered it in again, allocating AkzidenzGroteskStd-Bold to the Paragraph font and Retro60 to the header and when I go back onto the website, the Paragraph font is showing up as Retro60. 

I'm so confused, is there anyone who can help me.

Below is the CSS: 

/* Fonts */

@font-face {   
font-family: 'Retro60Prime';   
src: url(https://static1.squarespace.com/static/61a56f966f344c078b745703/t/62995162e0d2e9663cbeee37/1654215010082/Retro60Prime.ttf);}

@font-face {   
font-family: 'AkzidenzGroteskStd-Regular';   
src: url(https://static1.squarespace.com/static/61a56f966f344c078b745703/t/629951b431dd9f46a354c331/1654215092889/AkzidenzGroteskStd-Regular.otf);}

@font-face {   
font-family: 'AkzidenzGroteskStd-Bold';   
src: url(https://static1.squarespace.com/static/61a56f966f344c078b745703/t/6299522569c2cc367a2f5219/1654215205729/AkzidenzGroteskStd-Bold.otf);}

@font-face {   
font-family: 'AkzidenzGroteskStd-Light';   
src: url(https://static1.squarespace.com/static/61a56f966f344c078b745703/t/62995254d3f51f28eb27498e/1654215253233/AkzidenzGroteskStd-Light.otf);}
h1, h2, h3 {
font-family: 'Retro60Prime';
}
p1 {
font-family: 'AkzidenzGroteskStd-Regular';
}
p2 {
font-family: 'AkzidenzGroteskStd-Bold';
}
p3 {
font-family: 'AkzidenzGroteskStd-Light';
}

Hi @CarlyC

it's due to this line:

.sqs-block-button a, [class*='button'], [class*='btn']

[class*="button"] is targeting any element (or descendants of) with a class name containing "button". Which is the whole site essentially as the document body includes several matching classes.

Solution: increase the specificity of this code so you only target buttons

Hello! 

Amazing, thank you so much. Appreciate your help immensely. 

When you say increase the specificity of this code so I only target specific buttons, what code would I use to only target those oval clickable buttons?

1. Just following up on this, I can't seem to find any code to customise just those oval buttons site wide.