PRASHLDN

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;
}
}

Hi! 

I've scrolled through the whole thread but still cannot figure out what im doing wrong on my CSS. I'm on the 7.1 version on Squarespace so don't know if it's an issue, my custom font isn't being picked up, or when I head into edit mode, sometimes it'll be picked up and sometimes not? 

here's the CSS code:

 

//vertical line
.vertical-line {
  height: 500px; /* line height */
  width: 1px; /* line width */
  background: #38383B; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

/* Scrolling text color */
div.marquee-block * {
    color: White !important;
}

//footer social icon hover
.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;
}
}