Troubleshooting with CSS fonts

Site URL: https://ampneypark.co.uk/

Hi, 

in our website (https://ampneypark.co.uk/) the custom CSS fonts sometimes don't load. And sometimes they do normally.

It doesn't seem to be browser specific since one hour it seems to work on Chrome or Safari, and then coming back later displays a random typeface.

Does anybody would be able to help on this matter? 

I have contacted Squarespace, but the reply i got is that they don't offer support for CSS.

Attached two images, one showing how it's supposed to look, and another with the serif typeface showing how it sometimes looks.

Here is the code we are using on the Custom CSS area:

 

 

@font-face {
  font-family: 'RauschenB-Book';
  src: url(https://static1.squarespace.com/static/6251bccb14ee387acabc8828/t/625ab9e1ba77fe2ae5fc30df/1650112993061/Rauschen-BBook-Web.woff2) format('woff2'),    url(https://static1.squarespace.com/static/6251bccb14ee387acabc8828/t/625ab9bf08721a3f0a0e476e/1650112959344/Rauschen-BBook-Web.woff) format('woff');
}

h1 {
font-family: 'RauschenB-Book';
}

h2 {
font-family: 'RauschenB-Book';
}

h3 {
font-family: 'RauschenB-Book';
}

h4 {
font-family: 'RauschenB-Book';
}

.sqsrte-large {
font-family: 'RauschenB-Book';
}

p {
font-family: 'RauschenB-Book';
}

.sqsrte-small {
font-family: 'RauschenB-Book';
}

// Site Title //
.header-title-text a {
  font-family: RauschenB-Book !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: RauschenB-Book !important;
}

// Button //
.header-actions-action .btn {
  font-family: RauschenB-Book !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: RauschenB-Book !important;
}

// Small Button //
.sqs-block-button-element--small {
  font-family: RauschenB-Book  !important;
}

// Medium Button //
.sqs-block-button-element--medium {
  font-family: RauschenB-Book  !important;
}

// Large Button //
.sqs-block-button-element--large {
  font-family: RauschenB-Book  !important;
}

// Image Block Button //
.image-button a {
font-family: RauschenB-Book  !important;
}

// List item test //
.list-item-content__title.preFade.fadeIn {
font-family: RauschenB-Book  !important;
}

// Carroussel //
.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
font-family: RauschenB-Book  !important;
}

.user-items-list-carousel__slides {
font-family: RauschenB-Book  !important;
}

// Newsletter error message font //
.newsletter-form-fields-wrapper.form-fields {
font-family: RauschenB-Book  !important;
}

// Newsletter email block font//
.newsletter-form-field-element {
font-family: RauschenB-Book  !important;
}

// Newsletter button font //
.newsletter-form-button {
font-family: RauschenB-Book  !important;
}

// Mobile menu font //
.header-menu-nav-item  {
font-family: RauschenB-Book  !important;
}

/*Reducing font size for screens smaller than 960px*/
@media screen and (max-width: 960px) {
  h2 {
    font-size: 43px;
  }
}

// Newsletter confirmartion //
.form-submission-text  {
font-family: RauschenB-Book  !important;
}

/* Lightbox opacity */
.gallery-lightbox-background {
    opacity: 1
  !important;
}

Edited July 24, 2022 by cleberdecampos
had pressed send before finishing

Site URL: https://olive-wrasse.squarespace.com/blog

I am having an issue connecting all custom code to my website. It works for all pages except the blog URL entry page. Here is the code I am using (overkill I know) based on issues other people have had. Can you let me know where I can make a change to update this one section of code ? 

 

@font-face {

    font-family: 'DomaineDisplay-Semibold.otf';

       src: url('https://static1.squarespace.com/static/62572f75a7fa772dea3c1d96/t/62dc7a55fb41ba4dc9707942/1658616406105/DomaineDisplay-Semibold.otf');}

h1 {font-family: 'DomaineDisplay-Semibold.otf';}
h2 {font-family: 'DomaineDisplay-Semibold.otf';}
h3 {font-family: 'DomaineDisplay-Semibold.otf';}
h4 {font-family: 'DomaineDisplay-Semibold.otf';}
.blog-item-title h1 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blogList-item-title h1 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blogList-item-title h2 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blogList-item-title h3 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blogList-item-title h4 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blog-item-title h2 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blog-item-title h3 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}
.blog-item-title h4 {
    font-family: 'DomaineDisplay-Semibold.otf' !important;
}

1 hour ago, cleberdecampos said:

The custom CSS fonts sometimes don't load

Those font files will not load for visitors. They are being blocked by CORS policy. I recommend that you reach out to Squarespace Customer Care. 

Your site is set to private, so we can't actually look at it to see what's going on. If you can set it up with a password or make it public, others will be able to inspect your pages and provide assistance.

Hi @paul2009,

thank you very much for your reply.

I contacted Squarespace Costumer Service, and got this not useful message below.

Do you think there is a way to solve the 'Acess-control-allow-origin' header issue with Cors policy? Or is it a problem with Squarespace Servers?

Thank you!

 

Hi Cleber,
 
Thanks for getting back to us. I understand that you haven't received the reply you were hoping for. 
 
While you're welcome to use CSS, we aren't able to offer troubleshooting support for advanced modifications like custom code. 
 
I searched our support guides for common errors, and did see a section in our guide which notes: 
 
"You'll receive a CORS error if you use JavaScript to make requests from a browser. All requests must originate from a server side application. We don't support CORS requests."
 
I'm not sure if that is helpful information, but since you mentioned CORS policy, I thought it worth mentioning. You can view that section of the guide here:
 
https://support.squarespace.com/hc/en-us/articles/205815928#toc-if-you-receive-a-cors-error
 
Although we are unable to offer support for CSS, there are a few popular and credible websites we recommend for tutorials, troubleshooting, and reference guides:
 

• W3Schools
• Codecademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

 
I hope some of this information is useful. If you have any additional questions, please let us know and we will do our best to help.

On 7/24/2022 at 8:12 PM, karibru said:

Can you let me know where I can make a change to update this one section of code ? 

I'm unable to view your site as it is currently private. Please set a public password and share it with us.

To provide an accurate answer, we need to view your website in our browser. A screenshot can be helpful, but it isn’t enough. Please set a public password and share it with us. 

10 minutes ago, cleberdecampos said:

I contacted Squarespace Customer Service, and got this not useful message below.

As a first step, can you check that the files have been correctly added in Design > Custom CSS > Manage Custom Files (as shown in the screenshot below).

I ask because when I tried to view your font files this morning, they were not working. For example, this url (from your question) is not valid:

https://static1.squarespace.com/static/6251bccb14ee387acabc8828/t/625ab9e1ba77fe2ae5fc30df/1650112993061/Rauschen-BBook-Web.woff2
 

Hi Paul,

thank you very much.

Discovered what happened: i had duplicated the website, so the fonts were stored in the previous version of the website that ceased exhisting.

Now i reuploaded and it fixed it.

All good and thank you for the support. 

Cleber