Custom font not working

Read through the Circle release note from this week, in particular this that refers to font styling changes, their impact and how you can solve it:

Basically try !important in CSS font styling.

2 minutes ago, Vincentx said:

site is wrecked

Can you define this? Screenshot? Website URL and page? 

I've just had this happen on my site too on 7.1. Custom header fonts suddenly stopped working about an hour or so ago. All other fonts still working as expected. Only header font affected. The code has worked flawlessly for several years without a hitch. Have not edited code or font files.

It happened when I was inserting google adsense code using codeblocks in blog posts. I immediately assumed I had messed something up, so removed all code blocks and adsense code. Still have problem with header font. Custom CSS Paragraph font code working as it should.

Custom font CSS Code used below:

/ASSIGN NOTEWORTHY FONT//

h1 {font-family: 'NOTEWORTHY'; font-weight: bold}
h2 {font-family: 'NOTEWORTHY'; font-weight: bold}
h3 {font-family: 'NOTEWORTHY'; font-weight: bold}
h4 {font-family: 'NOTEWORTHY'; font-weight: bold}
p {font-family: 'NOTEWORTHY';}

Any ideas or potential SQ platform issue?

**UPDATE**

Changed code to this and now working again:

//ASSIGN NOTEWORTHY FONT//

h1 {font-family: 'NOTEWORTHY'!important; font-weight: bold !important}
h2 {font-family: 'NOTEWORTHY'!important; font-weight: bold !important}
h3 {font-family: 'NOTEWORTHY'!important; font-weight: bold !important}
h4 {font-family: 'NOTEWORTHY'!important; font-weight: bold !important}
p {font-family: 'NOTEWORTHY'!important;}

3 minutes ago, Ziggy said:

The code you have pasted here isn't CSS styling it's javascript code, it shouldn't be in Custom CSS, it should be in code injection or a code block depending on what it's for.

I am realizing that this has to do with the Squarespace issue. No one ever put this code into the website, it changed to this when Squarespace did some sort of update yesterday. So, it's not an issue of me putting in incorrect code. The engineers are working on a permanent solution. They indicated that there should be ways to fix this in the interim, but I think their workarounds are not quite working.

@Ziggy

The site is https://chateaugallery.com. I added some text on the homepage for an exhibition and the font sizes shrank. Everything is still an H1, H2, etc. but the text is the same size across the site. I'm using the stock font set from Squarespace to my knowledge.

"Helvetica Neue."

The text size shrank and the glitch unformatted the entire site after a basic edit.

Edit: I reset the font pack and it looks like it's working, hopefully.

Hi,

I'm running into the same issue. Could you tell me what I am doing wrong? I've placed the code below:

@font-face {
font-family: 'beverlyhillstypeface-italic';  
src: url(paste_url_herehttps://static1.squarespace.com/static/6469f6292bf06d24d3ab2ff3/t/64c2caeab45e274fc85a7056/1690487530347/BeverlyHillsTypeface-Italic.woff);
}
h1 {
font-family:  'beverlyhillstypeface-italic';
}

My Heading Font (Cehua) hasn't been working.

I've use this CSS format ever since and it was working until now. Can anyone tell why this happened and how I can get it back to working?

CSS Format Below:

// CUSTOM FONT
@font-face {
font-family: 'cehua';
src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/64527a19b01a7c64e65dfe97/1683126860075/Cehua.ttf) 
}
@font-face {
    font-family: 'BigShouldersDisplay-VariableFont_wght';
    src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/6452b31e74981c1c16a476a0/1683141407163/BigShouldersDisplay-VariableFont_wght.ttf);
}
h1 {
font-family: 'Cehua';
font-size: 60pt;
letter-spacing: 1px;
line-height: 140%;
}
h2 {
font-family: 'Cehua';
font-size: 40pt;
letter-spacing: 1px;
line-height: 140%;
}
h3 {
font-family: 'BarlowCondensed-Light';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%
}
p {
font-family: 'BigShouldersDisplay-VariableFont_wght';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {   
    font-family: 'BarlowCondensed-Light';   
    src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/6452b32781339714d8d0d61f/1683141416227/BarlowCondensed-Light.ttf); 
 

Hi!

My coding for my custom font was working perfect all day and then randomly stopped. I got the custom code for my paragraphs to work, but the heading ones will not work. I have attached my coding, am I doing something wrong? Why did it suddenly just stop working when it was fine all day?

Again - the custom paragraph font is working, just not headers.

 

// CUSTOM HEADING AND PARAGRAPH FONT

@font-face {

font-family: BASALONE;

src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c8a0d633fd506d8bac26/1690486944662/MADETOMMY-Medium_1.woff);
}
// CUSTOM HEADING TWO FONT

@font-face {

font-family: BASALTWO;

  src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c8a94642c47b3b35a71a/1690486953961/Brand.woff);
}
// CUSTOM PARAGRAPH FONT

@font-face {

font-family: BASALTHREE;

src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c89bb30a60475388d4e9/1690486939857/MADETOMMY-Light_2.woff);
}
// Newsletter Form Title //
.newsletter-form-header-title {
  font-family: BASALONE !important;
}
// Newsletter Form Description //
.newsletter-form-header-description p {
  font-family: BASALTHREE !important;
}
h1 {

font-family: 'BASALONE';}
h2 {

font-family: 'BASALTWO';}
h3 {

font-family: 'BASALONE';}
h4 {

font-family: 'BASALTWO';}
.sqsrte-large {

font-family: 'BASALONE';}

p {

font-family: 'BASALTHREE';}

.sqsrte-small {

font-family: 'BASALONE';}

47 minutes ago, Vee22 said:

Hi,

I'm running into the same issue. Could you tell me what I am doing wrong? I've placed the code below:

@font-face {
font-family: 'beverlyhillstypeface-italic';  
src: url(paste_url_herehttps://static1.squarespace.com/static/6469f6292bf06d24d3ab2ff3/t/64c2caeab45e274fc85a7056/1690487530347/BeverlyHillsTypeface-Italic.woff);
}
h1 {
font-family:  'beverlyhillstypeface-italic';
}

Hi Vee, two things to change.

1. Remove paste_url_here from the start of your URL

2. Change this bit to add the !important tag:

h1 {
font-family:  'beverlyhillstypeface-italic' !important;
} 

41 minutes ago, AlohiFIT said:

My Heading Font (Cehua) hasn't been working.

I've use this CSS format ever since and it was working until now. Can anyone tell why this happened and how I can get it back to working?

CSS Format Below:

 

// CUSTOM FONT
@font-face {
font-family: 'cehua';
src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/64527a19b01a7c64e65dfe97/1683126860075/Cehua.ttf) 
}
@font-face {
    font-family: 'BigShouldersDisplay-VariableFont_wght';
    src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/6452b31e74981c1c16a476a0/1683141407163/BigShouldersDisplay-VariableFont_wght.ttf);
}
h1 {
font-family: 'Cehua';
font-size: 60pt;
letter-spacing: 1px;
line-height: 140%;
}
h2 {
font-family: 'Cehua';
font-size: 40pt;
letter-spacing: 1px;
line-height: 140%;
}
h3 {
font-family: 'BarlowCondensed-Light';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%
}
p {
font-family: 'BigShouldersDisplay-VariableFont_wght';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {   
    font-family: 'BarlowCondensed-Light';   
    src: url(https://static1.squarespace.com/static/645279c17150481215dc64ab/t/6452b32781339714d8d0d61f/1683141416227/BarlowCondensed-Light.ttf); 
 

You'll need to add the !important tag next the the font names in these parts of the code:

h1 {
font-family: 'Cehua' !important;
font-size: 60pt;
letter-spacing: 1px;
line-height: 140%;
}
h2 {
font-family: 'Cehua' !important;
font-size: 40pt;
letter-spacing: 1px;
line-height: 140%;
}
h3 {
font-family: 'BarlowCondensed-Light' !important;
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%
}
p {
font-family: 'BigShouldersDisplay-VariableFont_wght' !important;
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}

25 minutes ago, mkamish said:

Hi!

My coding for my custom font was working perfect all day and then randomly stopped. I got the custom code for my paragraphs to work, but the heading ones will not work. I have attached my coding, am I doing something wrong? Why did it suddenly just stop working when it was fine all day?

Again - the custom paragraph font is working, just not headers.

 

// CUSTOM HEADING AND PARAGRAPH FONT

@font-face {

font-family: BASALONE;

src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c8a0d633fd506d8bac26/1690486944662/MADETOMMY-Medium_1.woff);
}
// CUSTOM HEADING TWO FONT

@font-face {

font-family: BASALTWO;

  src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c8a94642c47b3b35a71a/1690486953961/Brand.woff);
}
// CUSTOM PARAGRAPH FONT

@font-face {

font-family: BASALTHREE;

src: url(https://static1.squarespace.com/static/64b48ef258b1ac25b9c8f195/t/64c2c89bb30a60475388d4e9/1690486939857/MADETOMMY-Light_2.woff);
}
// Newsletter Form Title //
.newsletter-form-header-title {
  font-family: BASALONE !important;
}
// Newsletter Form Description //
.newsletter-form-header-description p {
  font-family: BASALTHREE !important;
}
h1 {

font-family: 'BASALONE';}
h2 {

font-family: 'BASALTWO';}
h3 {

font-family: 'BASALONE';}
h4 {

font-family: 'BASALTWO';}
.sqsrte-large {

font-family: 'BASALONE';}

p {

font-family: 'BASALTHREE';}

.sqsrte-small {

font-family: 'BASALONE';}

Try adding the !important tag next to all of these like you have with the newsletter form fonts

That worked! Thank you so much! 

I am trying to upload a custom font via CSS.  The font file is a ttf file type.  I am getting the error below saying that it has to be a ttf or other file extension.  It IS a ttf file type, so I don't know what the problem is.  I tried other ttf font files and even an otf type and get the same error with all.  What can I do to resolve this?

I was just deleting a button on my website and suddenly the custom font that was on my website stopped working. I was wondering what is going on and if there is anything wrong with my CSS? I didn't change any CSS but it all changed suddenly to the default font on the website "Gopher". My paragraph custom font is in place, but my headings are all messed up. What do I need to do to resort it to how it was before?

Website: https://www.maryvanderwall.com/

Here is the code: 

// CUSTOM FONT
@font-face {
font-family: 'recline-bold';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a72842c9fb606797f78e/1679337256142/Recline-Bold.otf);
}
h1 {
font-family: 'recline-bold';
font-size: 3rem;
letter-spacing: 1px;
line-height: 140%;
}
h2 {
font-family: 'recline-bold';
font-size: 2.6rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'recline-semibold';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a8193c494d689e590947/1679337497198/Recline-SemiBold.otf);
}
h3 {
font-family: 'recline-semibold';
font-size: 2.2rem;
letter-spacing: 1px;
line-height: 140%;
}
h4 {
font-family: 'recline-semibold';
font-size: 1.6rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'tofino-medium';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a5a5c9d3930f57de23e8/1679336869585/Tofino-MediumPersonal.otf);
}

p.sqsrte-large {
font-family: 'tofino-medium';
font-size: 1.35rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'tofino-regular';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a9fccc7117244a38fab2/1679337982450/TofinoText-RegularPersonal.ttf);
}
p {
font-family: 'tofino-regular';
font-size: 1rem;
letter-spacing: 1px;
line-height: 140%;
}
p.sqsrte-small {
font-family: 'tofino-regular';
font-size: 0.85rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'recline-medium';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418b79df1f5b02f4dabeb89/1679341469728/Recline-Medium.otf);
}
//DESKTOP//
.header-nav-item a {
    font-family: 'recline-medium';
  font-size: 1.1rem;
letter-spacing: 1px;
}
//MOBILE//
.header-menu-nav-item a {
     font-family: 'recline-medium';
  font-size: 2.1rem;
letter-spacing: 1px;
}

2 hours ago, MaryV said:

I was just deleting a button on my website and suddenly the custom font that was on my website stopped working. I was wondering what is going on and if there is anything wrong with my CSS? I didn't change any CSS but it all changed suddenly to the default font on the website "Gopher". My paragraph custom font is in place, but my headings are all messed up. What do I need to do to resort it to how it was before?

Website: https://www.maryvanderwall.com/

Here is the code: 

// CUSTOM FONT
@font-face {
font-family: 'recline-bold';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a72842c9fb606797f78e/1679337256142/Recline-Bold.otf);
}
h1 {
font-family: 'recline-bold';
font-size: 3rem;
letter-spacing: 1px;
line-height: 140%;
}
h2 {
font-family: 'recline-bold';
font-size: 2.6rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'recline-semibold';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a8193c494d689e590947/1679337497198/Recline-SemiBold.otf);
}
h3 {
font-family: 'recline-semibold';
font-size: 2.2rem;
letter-spacing: 1px;
line-height: 140%;
}
h4 {
font-family: 'recline-semibold';
font-size: 1.6rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'tofino-medium';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a5a5c9d3930f57de23e8/1679336869585/Tofino-MediumPersonal.otf);
}

p.sqsrte-large {
font-family: 'tofino-medium';
font-size: 1.35rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'tofino-regular';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418a9fccc7117244a38fab2/1679337982450/TofinoText-RegularPersonal.ttf);
}
p {
font-family: 'tofino-regular';
font-size: 1rem;
letter-spacing: 1px;
line-height: 140%;
}
p.sqsrte-small {
font-family: 'tofino-regular';
font-size: 0.85rem;
letter-spacing: 1px;
line-height: 140%;
}
@font-face {
font-family: 'recline-medium';
src: url(https://static1.squarespace.com/static/63193dc62cd6210bcfb74c5d/t/6418b79df1f5b02f4dabeb89/1679341469728/Recline-Medium.otf);
}
//DESKTOP//
.header-nav-item a {
    font-family: 'recline-medium';
  font-size: 1.1rem;
letter-spacing: 1px;
}
//MOBILE//
.header-menu-nav-item a {
     font-family: 'recline-medium';
  font-size: 2.1rem;
letter-spacing: 1px;
}

Now its saying that there's some sort of error on line 6 

Thanks so much @CassAggett. It worked. I appreciate your help!

Help! My custom fonts aren't working on Safari, only on Google Chrome. It replaces Headings and Paragraph fonts with an alternate serif font. https://www.inhabitstaffing.com

41 minutes ago, clarissafletcher said:

Help! My custom fonts aren't working on Safari, only on Google Chrome. It replaces Headings and Paragraph fonts with an alternate serif font. https://www.inhabitstaffing.com

Remove !important from @font-face code

It should be

@font-face {
    font-family: 'JennaSue';
    src: url(https://static1.squarespace.com/static/64c1c62d983f5a13b54e79e9/t/64c28b0b2f3c6a641b7827f7/1690471179305/JennaSue.ttf)
}

h2 {
    font-family: 'JennaSue' !important;
    font-size: 20pt;
    letter-spacing: 1px;
    line-height: 140%;
    color: #000
}

@font-face {
    font-family: 'Nunito-BlackItalic';
    src: url(https://static1.squarespace.com/static/64c1c62d983f5a13b54e79e9/t/64c28b6215f4f51b66e474fb/1690471266266/Nunito-BlackItalic.ttf)
}

h3 {
    font-family: 'Nunito-BlackItalic' !important;
    font-size: 20pt;
    letter-spacing: 1px;
    line-height: 140%;
    color: #fff
}

3 hours ago, MaryV said:

Now its saying that there's some sort of error on line 6 

Try save & reload the site. SS currently has a bug with this syntax message (Remember to save a copy of some code somewhere, before doing this)

Can you send me a ttf file? I will try testing

@tuanphan Thank you! It worked 🙂

Hi, 

Sorry to jump in as well but I've applied custom font to loads of webistes but suddenly it isn't working on one of them, can anyone help please? CSS used:

@font-face {    
font-family: 'baby'; 
src: url('https://static1.squarespace.com/static/645379c7223c5220548322f0/t/64593930757b5d6ba534c9c3/1683568945577/OoohBaby-Regular.ttf');  }

//ASSIGN baby to H4//
h4 {font-family: 'baby';}

I've also tried adding !important but tells me there is a syntax error when I do. Website url: https://sponge-paddlefish-2ln6.squarespace.com  Password: MaryPreview

The pink writing at the top of the homepage should be in the applied decorative font but isn't. I also can't make sense of it when inspecting the element. It appears to be formatted differently for some reason.

Any advice greatly appreciated. 

Thanks,

Holly

2 hours ago, HollyM said:

Hi, 

Sorry to jump in as well but I've applied custom font to loads of webistes but suddenly it isn't working on one of them, can anyone help please? CSS used:

 

@font-face {    
font-family: 'baby'; 
src: url('https://static1.squarespace.com/static/645379c7223c5220548322f0/t/64593930757b5d6ba534c9c3/1683568945577/OoohBaby-Regular.ttf');  }

//ASSIGN baby to H4//
h4 {font-family: 'baby';}

 

I've also tried adding !important but tells me there is a syntax error when I do. Website url: https://sponge-paddlefish-2ln6.squarespace.com  Password: MaryPreview

The pink writing at the top of the homepage should be in the applied decorative font but isn't. I also can't make sense of it when inspecting the element. It appears to be formatted differently for some reason.

Any advice greatly appreciated. 

 

Thanks,

Holly

 

 

There is a bug with syntax error. You can save & reload the site. If still doesn't work, let me know, we will check it again

15 hours ago, Ziggy said:

There's a bit of a bug currently with custom CSS showing error messages when the area no errors. I think both codes look fine, and suggest ignoring the error messages for now.

14 hours ago, Ziggy said:

TBH whatever Squarespace is doing in the background has made the header text mostly impervious to CSS this evening, it's not just you.

Thank you very much Ziggy for your recommendations and help. Still doesn´t work with the changes... :(. Do you know is squarespace will allow to change the header text size in the mobile with code? I´m getting crazy! Thank you again for all your help 🙏

.header-menu-nav-item {
    font-size: 15px an !important; 
}

Thanks, @tuanphan.  I sent you a forum message.