Jump to content

Custom font CSS no longer working

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 245
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

Link to comment
Posted (edited)
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.

Edited by raego
Link to comment
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.

Link to comment

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 

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.