Custom font CSS no longer working

I have installed some custom CSS fonts to a site and am trying to get them to work on a single page only. Below is the code I am using, this was working for all text however it has now stopped working and I'm not sure why. 

Headings are working correctly however paragraph text is not – called Sofia below. 

The font is installed correctly and is working for other elements such as scrolling text and accordion blocks.

<style>
  @font-face {
font-family:Cygnet;
src:url(https://static1.squarespace.com/static/60508b4353f74b54f8913bf8/t/6656b97e88db520a0a241d20/1716959614082/CygnetRegular-1Dg4.ttf);
}

@font-face {
font-family:Sofia;
src:url(https://static1.squarespace.com/static/60508b4353f74b54f8913bf8/t/6656b999db64d766b69c3338/1716959641857/SofiaProLight.ttf);
}
 
  h1, h2, h3, h4 * {
    font-family: 'Cygnet' !important;
  }
    p * {
    font-family: 'Sofia' !important;
  }
</style>

Site – https://www.brontegroup.com.au/central-park-working-1

Your current code targets all paragraphs with p *. The asterisk (*) is a universal selector and can be overridden by more specific selectors. Since headings are working, they likely have a more specific selector applied to them.

you can use particular id or class for use this font I'll send you a code 

Quote

#about-us p { /* Replace "#about-us" with the actual ID of your paragraph */
  font-family: 'Sofia' !important;
}

and second option 

Quote

p {
  font-family: 'Sofia' !important;
}

using this CSS for Increased Specificity

23 minutes ago, LoftyDevs said:

Your current code targets all paragraphs with p *. The asterisk (*) is a universal selector and can be overridden by more specific selectors. Since headings are working, they likely have a more specific selector applied to them.

you can use particular id or class for use this font I'll send you a code 

and second option 

using this CSS for Increased Specificity

Thanks - I tried option 2 which was working, but it didn't work for text links or bolded text which is why I added the *, and it is no longer working either way.

I would really like to see if there's a way to target all text on the page as there are a lot of different text blocks and would like it to be universal to any changes made to the page.

you can use this 

#collection-ID-12345 p,

#collection-ID-12345 h2

{  /* Replace 12345 with your actual ID */
  font-family: 'Sofia' !important;
}

p, h1, h2, h3, span { /* Targets paragraphs, headings, and spans */ font-family: 'Sofia' !important; }

14 hours ago, LoftyDevs said:

you can use this 

#collection-ID-12345 p,

#collection-ID-12345 h2

{  /* Replace 12345 with your actual ID */
  font-family: 'Sofia' !important;
}

p, h1, h2, h3, span { /* Targets paragraphs, headings, and spans */ font-family: 'Sofia' !important; }

Hi, this still doesn't work sorry.

sorry  @raego
 

h1 {font-family: 'MabryPro-Medium' !important;
font-size: 8vw !important;
line-height: 100% !important;
  margin-top: 0px;
  margin-bottom: 0px;
}

h2 {font-family: 'MabryPro-Medium' !important;
font-size: 3.8vw !important;
line-height: 1.1 !important;
  margin-top: 0px;
  margin-bottom: 0px;

}

h3 {
  font-family: 'MabryPro-Medium' !important;
font-size: 5vw !important;
line-height: 1.1 !important;
  margin-top: 0px;
  margin-bottom: 0px;
}

h4 {font-family: 'MabryPro-Medium' !important;
  font-size:36px;
line-height: 1.1 !important;
  margin-top: 0px;
  margin-bottom: 0px;
}

p {
  font-family: 'MabryPro-Regular' !important;
  margin-top: 0px;
  margin-bottom: 10px;
font-size: 22px;
line-height: 140% !important;
}

p2 {
  font-family: 'MabryPro-Regular' !important;
  margin-top: 0px;
  margin-bottom: 10px;
font-size: 36px !important;
line-height: 140% !important;
}

p3 {
  font-family: 'MabryPro-Regular' !important;
font-size: 14px !important;
line-height: 100% !important;
}
.sqsrte-small {
  font-family: 'MabryPro-Regular' !important;
font-size: 14px !important;
line-height: 100% !important;
}
.sqs-block-content {
  font-family: 'MabryPro-Regular' !important;
font-size: 12px !important;
line-height: 150% !important;
}

.header-nav *, nav.header-menu-nav-list * {
    font-size: 18px;
  color: #FD0 !important;
  font-family:'MabryPro-Medium' !important;
  text-align: center;
}

.sqs-block-button-element, .sqs-button-element--primary{
  font-family: 'MabryPro-Regular'!important;}


you can use a this type of code may be working this code replace with your font