Custom font not working

@TanyaRobertsCreative Can you share your website URL?

Hi @tuanphan and @Ziggy I am having the same issue. Here is my code below and it shows that I have a Syntax error on line 1. What should I update? 

https://static1.squarespace.com/static/63176d59b7bf5820f2660ac8/t/6346da8fd26c560965fcf647/1665587855753/Atlas_Media_Logo-Horiz_Transparent.png
https://static1.squarespace.com/static/63176d59b7bf5820f2660ac8/t/634788fdd7a71e14bcebb862/1665632510042/Atlas_Media_Logo-Horiz_Transparent-WHT-RED_Circle.png
p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important
}
p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important
}
.caption
{font-family:lato:
    text-transform:uppercase;
    font-size:14px;
    text-align:left;
    text-indent:20px;
color:#000000;}

Just jumping on this post as I have the same issue (just being a problem today, I think.) I already have !important in my code. I also have an issue with my headings not displaying properly, which I guess is the same issue? Here is my code as it currently stands:

/* change header nav active style */
.header-nav-item--active a {
  color: #cd463a  !important;
  background-image: none !important;
}@font-face {}
font-family: Cinzel Decorative;
src: url(https://static1.squarespace.com/static/5faac6029c507d39108d1a51/t/6276938b0db6957b13b218a6/1651938187311/Cinzel-VariableFont_wght.ttf);

You need to correct these issues:

Here's the corrected CSS:

p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important;
}
p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important;
}
.caption {
    font-family:lato;
    text-transform:uppercase;
    font-size:14px;
    text-align:left;
    text-indent:20px;
    color:#000000;
}

Your @font-face has closed brackets, the content should be inside those:

Here's the corrected code:

/* change header nav active style */
@font-face {
  font-family: Cinzel Decorative;
  src: url(https://static1.squarespace.com/static/5faac6029c507d39108d1a51/t/6276938b0db6957b13b218a6/1651938187311/Cinzel-VariableFont_wght.ttf);
}
.header-nav-item--active a {
  color: #cd463a  !important;
  background-image: none !important;
}

1 hour ago, Ziggy said:

Have you tried any of the suggestions in this thread to fix it?

It looks like I was able adjust with the important tag. 
SO WEIRD and panicky. All was well for months, and then last night it just stopped. But I was working on something else entirely and hadn't touched the CSS.

Just now, KJweb said:

It looks like I was able adjust with the important tag. 
SO WEIRD and panicky. All was well for months, and then last night it just stopped. But I was working on something else entirely and hadn't touched the CSS.

Squarespace is making a backend change to the way fonts are handled, check the Circle release notes from this week to learn more.

Thanks @Ziggy it says I still have Syntax error on line 14 font-family:lato;

Any thoughts?

Thanks Ziggy, you're so helpful. However when I post the code I'm being told i'm missing a bracket, and I can't spot where it should be?!

/* change header nav active style */

@font-face {

  font-family: Cinzel Decorative;

  src: url(https://static1.squarespace.com/static/5faac6029c507d39108d1a51/t/6276938b0db6957b13b218a6/1651938187311/Cinzel-VariableFont_wght.ttf);

}

.header-nav-item--active a {

  color: #cd463a  !important;

  background-image: none !important;

}

This has happened to me too, the fonts suddenly changed, but I'm not using custom fonts.  I have no idea why or how this happened! They are now arial (I believe) and it looks terrible.

Originally I just selected one of the standard font design options (orpheus), they weren't custom because I'm. not a coder. Please help!! 

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.

2 hours ago, iheardyousay said:

Any thoughts?

Yes, I've seen multiple reports of erroneous error messages in custom CSS, you can ignore this.

I mistakenly left in duplicate CSS for the hyphenation, you can remove that as you don't need it in there twice.

• Thank you very much for your reply!! Then I will wait.
   

3 minutes ago, lanuevacreativa said:

.header-menu-nav-item a {
    font-size: 17px;
}

Try with an !important after the 17px, inside the semicolon.

You could also try without the a. 

43 minutes ago, lanuevacreativa said:

And it doesnt worked in any of my web sites

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

Hello,

We are having a similar issue and this is beyond my coding knowledge. All of our fonts changed (these were from a template through Squarespace). Can someone make a suggestion of how to help with this code and error? I appreciate this community so much!

Error: Syntax Error on line 1

@marybethhardingyoga

You can't put a URL in CSS like that, try deleting line one. 

This is also happening on another page I manage, but this one has a more complicated CSS (that I did not set up). Same error message: Syntax Error on line 1

<script>
{function {} {}
  let folders;

  function rebuildAnchor(folder) {
    let parent = folder.closest('.header-nav-item--folder'),
        href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""),
        anchorClone = folder.cloneNode(true);

    anchorClone.classList.add('clickable-folder');
    anchorClone.setAttribute('href', href);
    anchorClone.style.cssText = `
          opacity: 1;
          transform: unset;
    `;
    parent.insertAdjacentElement('afterbegin', anchorClone);
    if (href == window.location.pathname) {
      console.log()
      anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active')
    }
  }

  function addToMobile(folder) {
    let href = folder.getAttribute("href"),
        hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""),
        text = folder.innerText,
        newText = `All ${text}`,
        mobileFolder = document.querySelector(`[data-folder="${href}"]`),
        backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"),
        allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external">
                  <a href="${hrefAdjusted}">${newText}</a>
            <div>`;

    backButton.insertAdjacentHTML('afterend', allButton)
  }

  /* Select All Folder Links &  */
  function setFolderLinks() {
    folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

    for (let folder of folders) {
      window.addEventListener('load', function() {
        addToMobile(folder);
        rebuildAnchor(folder);
        folder.remove();
      });
    }
  }

  setFolderLinks();
})();
</script>

Just now, Ziggy said:

@marybethhardingyoga

You can't put a URL in CSS like that, try deleting line one. 

Thank you - I do not remember entering this line of CSS so I don't think I did that originally. I'll try removing it and see what happens.

Here's the custom css on the website. It suddenly stopped working on this site and another one under my account. Specifically custom fonts. The files are uploaded. It looks like SS is fully operational right now. Is there something wrong wtih the code?

SITE 1  https://www.eriellegraycreative.com/

/* font styles for h3 and h4 */
h3, h4 {
  font-family: 'PinyonScript';
}

@font-face {
  font-family: 'PinyonScript';
  src: url('https://static1.squarespace.com/static/649079639ab9cc0ff9f9791d/t/6491956b06a583532ef5f7d0/1687262572021/Pinyon+Script.woff2'),
       url('https://static1.squarespace.com/static/649079639ab9cc0ff9f9791d/t/6491957416317165f7985f34/1687262580630/Pinyon+Script.woff'),
       url('https://static1.squarespace.com/static/649079639ab9cc0ff9f9791d/t/64919578074d6e398212b4aa/1687262585044/Pinyon+Script.ttf');
}

/* Font style for paragraphs*/
p {
  font-family: 'OpenSauceSans-Light', sans-serif;
@font-face {
  font-family: 'OpenSauceSans-Light';
  src: url('https://static1.squarespace.com/static/649079639ab9cc0ff9f9791d/t/64907f2d77c8e2073802ceb6/1687191341840/OpenSauceSans-Light.ttf'), }

  /*Button Styles-*/

#block-6467bec116f82c69e7d64ca1
.sqs-block-button-element:hover {background-color:#f6c03c; color:#000}

sqs-block-button-element:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}

}

/* Font style for site header */
.site-header {
  font-family: 'Maharlika', sans-serif;
}

SITE 2 https://www.luneermgmt.com

#block-yui_3_17_2_1_1654121289252_2577 {
  margin-top: 40px;
}

.user-items-list-simple .list-item { 
  border: 1px solid #111;
  height: 95%;
 margin: 10px;
}

div.list-section-title p, h2.list-item-content__title {
    font-family: 'Noir' !important;
}

section[data-section-id="6272787607fb9038a1ed33ae"] {.sqs-block-button-element {
  width: 70%;}}

.header-menu-nav-item a {
    font-size: 16px;
}

section[data-section-id="6256e3de2b60be6f358c1e3c"],section[data-section-id="62581bd5027a276527406902"] {
@media screen and (max-width: 641px) {
  h1 {font-size: 30px;}
   h1 em {font-size: 11px;}
  h2 em {font-size: 12px;}}}

#block-yui_3_17_2_1_1649951989389_26644 {width:70%; margin:auto;}

#page {
  overflow: hidden !important;
}

// Solid Underline Form // 

.field-list .field-element{
    border-color: #000000 !important;
    border-bottom: solid 2px #000000 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background-color: transparent !important;
  }
  .field-list select:focus{
    outline-color:  #000000 !important;
  }
  .field-list .section{
    border-color: #000000 !important;
}

//about page//

@media screen and (min-width:641px) {
  #block-yui_3_17_2_1_1649944911910_6498 {
    margin-top:-55%;
  }}

//testimonials//
.user-items-list .list-section-title p {
  font-size: 20px;
}

//about page//

#block-yui_3_17_2_1_1649940372809_4094 {width:-30%; margin-top:-40%;}

//BORDER//
.design-layout-inline  .image-block-wrapper {border: 1px solid #000; overflow:visible!important;}
.design-layout-inline img {margin-left: 0px; margin-top: 0px; }

#block-yui_3_17_2_1_1649951989389_26644 {
  .design-layout-inline  .image-block-wrapper {border: 0px solid #000; overflow:visible!important;}
}

//center//

section[data-section-id="62577fea849dc52814ef8da1"] {
.sqs-row {
  display:flex;
  align-items: center;
}
}

//header button//
.header-actions .btn, .header-menu .header-menu-cta a {
  font-family: 'ARIAL'!important;
  color: #F5ECE1;
  border: 1px solid #F5ECE1 !important;
    letter-spacing: 0.15em!important;
  text-transform: uppercase!important;
}

#block-yui_3_17_2_1_1649901694540_3674,#block-yui_3_17_2_1_1649901549145_3635,#block-yui_3_17_2_1_1649901694540_4575 {
    align-items: center;
}

section[data-section-id="62577fea849dc52814ef8da1"] {
  @media screen and (min-width:641px) {
  .sqs-col-4 {
      box-sizing:border-box;
      padding:4% !important;
  }
 .sqs-col-4:nth-child(2) 
  {
  border-right:1px solid #9E4C1F;
    border-left:1px solid #9E4C1F;
    
  }
  }
}

section[data-section-id="625779a2455491577e09d403"] {
    display: flex;
    align-items: center;
}

//HEADER VA//
section[data-section-id="62e1a4bbbf58aa092693b2c0"]{
  background-color:#000;
  @media(min-width:767px){
    .section-background{
      width:35%;
      margin-right:50%;
    }
    .content-wrapper {
      width:50%;
      margin-left:43%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//HEADER//
section[data-section-id="6256e3de2b60be6f358c1e3c"]{
  background-color:#F5ECE1;
  @media(min-width:767px){
    .section-background{
      width:35%;
      margin-right:50%;
    }
    .content-wrapper {
      width:50%;
      margin-left:43%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//section 2//
section[data-section-id="62577ce6b1da4c6154589c66"]{
  background-color:#F5ECE1;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//red split//
section[data-section-id="625835ae3970573fcf1b155d"],section[data-section-id="62581bd5027a27652740690a"]{
  background-color:#9E4C1F;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//HEADER//
section[data-section-id="62581bd5027a276527406908"],section[data-section-id="62581bd5027a276527406902"],section[data-section-id="62577dd0455491577e0a598b"]{
  background-color:#161D18;
  @media(min-width:767px){
    .section-background{
      width:35%;
      margin-right:50%;
    }
    .content-wrapper {
      width:50%;
      margin-left:43%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//HEADER//
section[data-section-id="62581bd5027a276527406902"],section[data-section-id="62577dd0455491577e0a598b"]{
  background-color:#161D18;
  @media(min-width:767px){
    .section-background{
      width:35%;
      margin-right:50%;
    }
    .content-wrapper {
      width:50%;
      margin-left:43%!important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:200px;
    }
  }}

//WHITE BUTTONS//
section[data-section-id="626b2f1afd4cc6667e6193e4"],section[data-section-id="625835ae3970573fcf1b155d"],section[data-section-id="62581bd5027a27652740690a"],section[data-section-id="62581bd5027a276527406908"],section[data-section-id="62577dd0455491577e0a598b"],section[data-section-id="62577bb5172b3762c2e38d3f"] {
p a {
        font-family: Poppins-SemiBold;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.3em;
        line-height: 1.5em;
        padding: 2px 0;
        color: #fff !important;
        text-transform: uppercase;
        border: none !important;
        border-bottom: 1px solid #fff !important;
        display: inline-block;
        margin-top: 25px;
  }}

//BUTTONS//
p a {
        font-family: Poppins-SemiBold;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.3em;
        line-height: 1.5em;
        padding: 2px 0;
        color: #000 !important;
        text-transform: uppercase;
        border: none !important;
        border-bottom: 1px solid #000 !important;
        display: inline-block;
        margin-top: 25px;
    }

//ITALICS//

h3 em {
font-family: 'arial';
  font-size: 20px;
font-weight: 400;
  letter-spacing: 2px;
font-style: normal;
}

h2 em {
font-family: 'arial';
font-weight: 400;
    font-size: 15px;
  letter-spacing: 2px;
  line-height: 12px;
font-style: normal;
}

h1 em {
font-family: 'arial';
    font-size: 18px;
font-weight: 00;

  letter-spacing: 3px;
font-style: normal;
}

h1 {
  font-family: 'noir';

}

h2 {
  font-family: 'noir';
}

h3 {
  font-family: arial;
  font-size: 34px;
}

h4 {

  font-family: 'arial';

  font-weight: 400;

  font-style: none;

  font-size: 26px;

  letter-spacing: 0.1em;

  text-transform: Normal;

  line-height: 1em;

}

@font-face {

    font-family: 'Questrial-Regular';

       src: url('https://static1.squarespace.com/static/6256e2acabc5e3203a27e270/t/6256e32b65d3d501c7a2a719/1649861419444/Questrial-Regular.ttf');

  }

@font-face {

    font-family: 'noir';

       src: url('https://static1.squarespace.com/static/6256e2acabc5e3203a27e270/t/6256e33018cdd5011222304a/1649861424488/NOIRetBLANC.otf');

  }

P {

  font-family: 'Questrial-Regular';

  font-weight: 400;

  font-style: none;

  letter-spacing: 0.15em;

  text-transform: Normal;

  line-height: 1.7em;

}

.blog-item-title h1.entry-title {
    font-family: noir !important;
}
.blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: 2rem;
}

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
  font-family: noir !important;
  }}

Same problem - im using standard site styles and now looks like basic font and wrong sizes.  I tried changing back but it wont save

1 minute ago, marybethhardingyoga said:

more complicated CSS

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.

2 minutes ago, marybethhardingyoga said:

Thank you - I do not remember entering this line of CSS so I don't think I did that originally. I'll try removing it and see what happens.

This can happen accidentally if you click on an uploaded file in the Custom CSS uploads.

I have no idea if I'm running any custom CSS but I edited one paragraph and the site is wrecked. Somebody give me some advice lol.