Custom font not working

Hello, my site had a lot of custom css for font-family and font-sizes - for some reason yesterday when I logged in, everything stopped working and now I cannot get my custom font family to work properly. 

This is the code I am using which has previously worked but isn't now! Any assistance would be greatly appreciated.

@font-face {
  font-family: 'SharpSansDispNo1Medium';
  src: url(https://static1.squarespace.com/static/622773867ce21708011002f4/t/64c0ca038080124053e2b089/1690356227530/SharpSansDispNo1-Medium.woff2);
}

h1, h2, h3, h4, h5 {
  font-family:'SharpSansDispNo1Medium';
}

There is a change happening to the CSS regarding fonts, adding !important to the code should solve this:

h1, h2, h3, h4, h5 {
  font-family:'SharpSansDispNo1Medium' !important;
}

I had the same thing happen to me today! Which is the worst timing ever because I'm about to apply for a job. I'm super confused because nothing was showing up in red as an error.

@font-face {   
font-family: 'rosalia';   
src: url(https://static1.squarespace.com/static/61a540528a6182273e475ad2/t/61a5467b829f5f05eabc623f/1638221436096/Rosalia.ttf), url(https://static1.squarespace.com/static/61a540528a6182273e475ad2/t/61a5468de9b2323301b0d48e/1638221454229/rosalia-webfont.woff), url(https://static1.squarespace.com/static/61a540528a6182273e475ad2/t/61a54692829f5f05eabc6837/1638221458571/rosalia-webfont.woff2URL.woff2);}
h1 {font-family: 'rosalia';}
h2 {font-family: 'rosalia';}
h3 {font-family: 'rosalia';}
h4 {font-family: 'rosalia';}

Anyone experiencing their custom fonts suddenly not loading on their website? (Specifically their heading fonts). I have not altered any of my CSS for a while. Has some of the Squarespace language changed?

Yes, that's exactly what happened, read the latest Circle release notes:

Adding !important should get you through.

I'm having the same issue and all support is able to say is "Sorry we can't guarantee CSS will be supported." 

Like, it was working fine for WEEKS.

If they aren't able to guarantee CSS will work, does anyone know if they plan on creating a wawy, similar to Wix where you can upload a custom font and use it without needing to code it in ? Because this is silly and can create such annoying brand cohesiveness if they just decide that the code doesn't work anymore. 

Hopefully this is just a background update that gets sorted soon and the ode becomes compatible again. 

@Ziggy Thanks, friend! I haven't checked the release notes yet today. This is helpful to know.

Also font problems, sigh. Site is at https://fiddle-drum-m9ds.squarespace.com/

// CUSTOM FONT
@font-face {
font-family: 'd-din-pro';

src: url('https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b5591bb7294e5e0e7be4d9/1689606427346/D-DIN-PRO-400-Regular.otf');
}
@font-face {
font-family: 'd-din-pro-bold';

src: url('https://static1.squarespace.com/static/64aedc5fd4f41012a9a6897f/t/64b559221484773364f6265f/1689606434717/D-DIN-PRO-700-Bold.otf');
}
 

h1 {

font-family: 'd-din-pro';}

h2 {

font-family: 'd-din-pro';}

h3 {

font-family: 'din-condensed';}

h4 {

font-family: 'd-din-pro';}

.sqsrte-large {

font-family: 'd-din-pro';}

p {

font-family: 'd-din-pro';}

.sqsrte-small {

font-family: 'd-din-pro';}

//hide cart and profile icons in footer
.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
   
}
.sqs-svg-icon--list a:nth-of-type(2) {
  svg {      
    display:none;   
  }   
   
}

I hope you get your fonts working without too much trouble!

Seems to be an issue across the board. I'm guessing there is some update going on but I reaaaaally hope when it's finished things will go back 

I was supposed to show a new website to my client and now none of the fonts are right 🙃

Same....

Also, to anyone reading this thread with the same problem - check the release notes for a workaround / info about the new language. My heading fonts were not loading because they were the only ones I did not use the !important; override with (p and other element specific styles all had the override; so only the generic H1, H2 and H3 instances on my website are currently broken)

@Ziggy Thanks! I'm starting with assessing how may of my sites are affected. I understand that this is a rollout, so I'll keep monitoring thru the 28th.

@Ziggy I tried the !important override and it still isn't working for me- any other ideas?

[data-website-fonts] h1 {font-family: 'FONT_NAME' !important; text-transform: uppercase !important;}

I had to add the first [ ] bracket before the h1 selection AND label the font AND transformations as !important and this is what worked for my case. I hope I don't have to add the

var(FONT_NAME or TRANSFORMATION)

to all my projects, but time will tell!

10 minutes ago, goodmajick said:

I'm starting with assessing how may of my sites are affected. I understand that this is a rollout, so I'll keep monitoring thru the 28th.

Yes, a very good idea! Fingers crossed it doesn't have a huge impact.

1 minute ago, goodmajick said:

@DariaMarieDesigns Try adding

[data-website-fonts] h1 {font-family: 'FONT_NAME' !important;}

the [data-website-fonts] before

I'll try that now, thank you!

I am also having this problem. I did not make any style or domain edits. What gives????

Happening to me at the moment too! so annoying

This happened to me today as well...all custom fonts stopped working. I'm waiting to hear back from Squarespace support.

My custom fonts were working, then I invited another user to have permissions over the site, and then the custom fonts stopped working all of a sudden.

• I've reviewed my code a million times
• I've deleted and re-uploaded my custom font files
• I've also tried rewriting my code from scratch, and Squarespace will not show my custom fonts

Can anyone help me understand what is tripping me up? Thanks for any and all help!

@font-face {font-family: Glacior;
src: url(https://static1.squarespace.com/static/64bf1a19162dde33e91e1a1a/t/64c1a7dc911379774490b159/1690413020503/Glacior-Display.otf);
}

h1 {font-family: 'Glacior';}
h2 {font-family: 'Glacior';}
h3 {font-family: 'Glacior';}

@font-face {
font-family: Jost;
src: url(https://static1.squarespace.com/static/64bf1a19162dde33e91e1a1a/t/64c1a833b42223550a236d35/1690413108071/Jost300Light.otf);
}
p1 {font-family: 'Jost';}

p {font-family: 'Jost';}

.user-items-list .list-section-title p {
  font-family: Glacior;
  font-size: 50px;
}

h2.list-item-content__title {
     font-family: 'Jost' !important;
  font-size: 35px !important;
  letter-spacing: 0px !important;
}

//smooth scroll 

html {scroll-behavior: smooth;}

It seems the "Jost" font is now working, although I did not make edits to the code. The "Gacior" font is still not working.

My Custom Fonts are not working as well, i have improved the code and remains the same, its a squarespace issue?

Hi, thank you so much, not sure where should I add, 

!important;

after the code related to the font or each heading?

This is what I have: 

https/static1.squarespace.com/static/646e5b6e58931c192b27638a/t/6472f6f68cadd16a5f7681fb/1685255926823/Pierson-Light.otf/* Adding special font (PIERSONLIGHT) for headings 1 and 2 */
@font-face {
font-family: PIERSONLIGHT;
src: url(https://static1.squarespace.com/static/646e5b6e58931c192b27638a/t/6472f6f68cadd16a5f7681fb/1685255926823/Pierson-Light.otf);
}
h1, h2{
font-family: 'PIERSONLIGHT';
}

A designer installed this for me so I'm not sure what to do. Thank you in avance for your help!