can't load custom font on browser

Hi all,

i added custom font to the website below (passcode: 1234) , it works in the working area of squarespace, but when it's on guest mode (browsers), the fonts won't show at all, kindly advise any solution, thank you so much!

https://manatee-wolf-gbxe.squarespace.com 

@font-face {
  font-family: 'PPEditorialNew-UltraboldItalic';
  src: url(https://static1.squarespace.com/static/646d7ab92d567c38e825d223/t/646d7cdf0c7af70bf0d78175/1684896991621/_PPEditorialNew-UltraboldItalic.otf);
}

@font-face {
  font-family: 'PPEditorialNew-regular';
  src: url(https://static1.squarespace.com/static/646d7ab92d567c38e825d223/t/646d7ce9e6cd722f99573ea6/1684897001702/_PPEditorialNew-Regular.otf);
}

@font-face {
  font-family: 'PPNeueMontreal-Bold'!important;
  src: url(https://static1.squarespace.com/static/646d7ab92d567c38e825d223/t/646d7d094f91495d2e18eead/1684897034743/PPNeueMontreal-Bold.otf);
}

@font-face {
  font-family: 'PPNeueMontreal-medium';
  src: url(https://static1.squarespace.com/static/646d7ab92d567c38e825d223/t/646d7d294c833f6b3941d518/1684897066565/PPNeueMontreal-Medium.otf)!important;
}
/* Replace 'CustomFontName' with the name of your custom font, and 'path/to/custom/font.ttf' with the actual path to your font file. */

h1,h2,.collection-type-products .grid-title  {
  font-family: 'PPEditorialNew-UltraboldItalic', serif!important;
}

.ProductItem .ProductItem-details  .ProductItem-details-title {
  font-family: 'PPEditorialNew-UltraboldItalic', serif!important;
}

h3,h4 {
  font-family: 'PPEditorialNew-regular', serif!important;
}
h5,h6 {
  font-family: 'PPNeueMontreal-Bold', sans-serif!important;
}
.ProductItem .ProductItem-details .product-price  {
  font-family: 'PPNeueMontreal-Bold', sans-serif;
}
p{
  font-family: 'PPNeueMontreal-medium', sans-serif;
}

.ProductItem-details .sqs-add-to-cart-button-wrapper
.sqs-add-to-cart-button , .ProductItem-details .quantity-label , .ProductItem-details .product-quantity-input 
{
  font-family: 'PPNeueMontreal-medium', sans-serif!important;
}

.header-nav-item a {
  font-family: 'PPNeueMontreal-medium', sans-serif!important;
}

.header-title-text a {
  font-family: 'PPEditorialNew-regular', serif!important;
}
.sqs-block-button-element

{
  font-family: 'PPNeueMontreal-medium', sans-serif;
}

.product-block .productDetails .product-title  {
  font-family: 'PPEditorialNew-regular', serif!important;
}
.product-block .productDetails .product-price {
  font-family: 'PPNeueMontreal-medium', sans-serif!important;
}

It looks fine to me. What should it look like or can you share link to page where you have problem?