HELP!: Custom Font Issues - Squarespace V 7.1

Hi, 

I have searched through so many topics on custom code and asked squarespace but still having issues in adding my custom font to my website. Initially the custom font worked fine, however, the evening of working on the site, the font wasn't being recognised. I got into edit mode and it randomly appears, but then exiting, it goes into some the font selected on the Squarespace builder. Maybe im doing something major wrong but can't figure it out. Also not sure if OTF or TTF or any other type file is better? 

I'm sending the entire CSS incase anyone can help!:

//vertical line
.vertical-line {
  height: 500px;
  width: 1px;
  background: #38383B;
  margin-right: auto;
  margin-left: auto;
}
div.marquee-block * {
    color: White !important;
}
.sqs-svg-icon--list {
  a:hover .sqs-use--icon {
        fill: #FF8E29 !important;
}
@font-face {font-family:'DrukWideBold';
  
src: url(https://static1.squarespace.com/static/5ff779d442d4d22d66f145d5/t/6661a07b4c509e0648b623e6/1717674107348/DrukWideBold.otf);
}
h1, h2, h3, h4, h5 {
  font-family:'DrukWideBold'!important;
}
}

Remove this from your code

On 6/6/2024 at 7:15 PM, PRASHLDN said:

Hi, 

I have searched through so many topics on custom code and asked squarespace but still having issues in adding my custom font to my website. Initially the custom font worked fine, however, the evening of working on the site, the font wasn't being recognised. I got into edit mode and it randomly appears, but then exiting, it goes into some the font selected on the Squarespace builder. Maybe im doing something major wrong but can't figure it out. Also not sure if OTF or TTF or any other type file is better? 

I'm sending the entire CSS incase anyone can help!:

//vertical line
.vertical-line {
  height: 500px;
  width: 1px;
  background: #38383B;
  margin-right: auto;
  margin-left: auto;
}
div.marquee-block * {
    color: White !important;
}
.sqs-svg-icon--list {
  a:hover .sqs-use--icon {
        fill: #FF8E29 !important;
}
@font-face {font-family:'DrukWideBold';
  
src: url(https://static1.squarespace.com/static/5ff779d442d4d22d66f145d5/t/6661a07b4c509e0648b623e6/1717674107348/DrukWideBold.otf);
}
h1, h2, h3, h4, h5 {
  font-family:'DrukWideBold'!important;
}
}

Have you figured it out? If you have already checked at Tuanphan comment but it still doesn't work, share your URL and we can check it easier