Jump to content

Troubleshooting with CSS fonts

Recommended Posts

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

WhatsApp Image 2022-07-22 at 14.25.42.jpeg

WhatsApp Image 2022-07-22 at 14.24.45.jpeg

Edited by cleberdecampos
had pressed send before finishing
Link to comment

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

Screen Shot 2022-07-24 at 12.09.46 PM.png

Link to comment
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

image.thumb.png.e07d1a86e2a881fd6b38a1ff2d0033b3.png

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

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:
 

 
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.

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

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
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
 

image.thumb.png.28653222d61a00cd014ef9f0e1ff41cb.png

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

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.