Custom font not working

8 minutes ago, alegria said:

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! 

 

Add to this code

h1, h2{
font-family: 'PIERSONLIGHT' !important;
}

Change these lines

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

to this

h1, h2, h4, p, .sqsrte-large, .sqsrte-small {
	font-family: 'd-din-pro' !important;
}

h3 {
	font-family: 'din-condensed' !important;
}

Thank you!! still says syntax error in line 1 any idea why?

Yep - me as well and there’s definitely nothing wrong with the CSS on my site.  I’ve double and triple checked (also used important to make sure) and as everyone else stated above - the custom fonts have been in place the whole time and I’ve not made any adjustments to custom CSS in this time.  

With this many of us it can’t be a coincidence.  Let’s hope we find out soon what’s going on and what steps to take if we need to amend anything 🙄 Super frustrating because I was just recommending Squarespace to a client and saying how reliable they are too.

UPDATE - My custom font’s starting working again?  What about you?

5 hours ago, FullCircleDesigns said:

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

With Gacior, change this line

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

to this

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

Still not working for me

3 hours ago, Jano said:

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

2 hours ago, emilianonunez said:

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

43 minutes ago, rachelpowell said:

Yep - me as well and there’s definitely nothing wrong with the CSS on my site.  I’ve double and triple checked (also used important to make sure) and as everyone else stated above - the custom fonts have been in place the whole time and I’ve not made any adjustments to custom CSS in this time.  

With this many of us it can’t be a coincidence.  Let’s hope we find out soon what’s going on and what steps to take if we need to amend anything 🙄 Super frustrating because I was just recommending Squarespace to a client and saying how reliable they are too.

UPDATE - My custom font’s starting working again?  What about you?

8 hours ago, straight-creative said:

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

Try changing these lines

Quote

h1 {font-family: 'rosalia';}
h2 {font-family: 'rosalia';}
h3 {font-family: 'rosalia';}
h4 {font-family: 'rosalia';}

to

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

1 hour ago, alegria said:

Thank you!! still says syntax error in line 1 any idea why?

Remove URL in Line 1

that worked! Thanks @tuanphan

It's still not working i'm afraid. It seems other people are having the same issue?

9 minutes ago, otherstudio said:

It's still not working i'm afraid. It seems other people are having the same issue?

Save & reload the site.

Good day, my custom font is not working on one of my website but it do works on my test website where I do the updates before making chances on the main website. 

Main website: https://fightclubphilippines.com/reservations

Test website: https://www.fitclubphilippines.com/test-3

Custom font that is missing : "Soloist"

Custom CSS for both of them: 

.header-display-desktop [href="/fight-club-philippines"] + .header-nav-folder-content{
  width:100vw;
  right:0 !important;
  left: 0 !important;
  position:fixed;
  box-sizing:border-box;
  padding:0px;
  border-top:1px solid;
  border-bottom:1px solid;
  box-shadow:0px 5px 5px #aaa;
  .header-nav-folder-item{
    display:none;
  }
  a{
    display:inline !important;
  }
  .sqs-block-button-element{
    display:inline-block !important;
    padding: 1em 1.6em !important;    
  }
.header-display-desktop [href="/fight-club-philippines"] + .header-nav-folder-content .header-nav-folder-item{
   display:none;
}
  
}//ADDING SOLOIST FONT//
@font-face {    
font-family: 'SOLOIST';       
src: url('https://static1.squarespace.com/static/600f9ebc5dde0207fd5fef45/t/6011c8ea97ed950de11ffa15/1611778282949/soloistital1.ttf'); 
 }
h1 {
  color: green;
  -webkit-text-fill-color: black; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white;
}
h1 {font-family: 'SOLOIST';}

@font-face {    
font-family: 'SOLOIST H2';       
src: url('https://static1.squarespace.com/static/600f9ebc5dde0207fd5fef45/t/6011c8ea97ed950de11ffa15/1611778282949/soloistital1.ttf'); 
 }
h2 {font-family: 'SOLOIST h2';}

//Stylized Folder Dropdown Menu
@linkBGColor: none;
@linkTextColor: gold;
@linkUnderlineColor: gold;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0!important;
  .header-nav-folder-item a {
    padding: .25em 1em!important;
  }
  .header-nav-folder-item a:hover {
    background: 
      @linkBGColor!important;
    color: @linkTextColor!important;
  .header-nav-folder-item a:hover {
    text-decoration: underline gold 
}}
}

This is due to a temporary setting while Squarespace is making some changes. Add !important to your H1 setting like this:

h1 {font-family: 'SOLOIST' !important;}

Same for h2 and any others that have a custom font set.

The same has happened to me. When I tried the workaround that Squarespace suggested it looks even worse. I'm at a loss 😪

2 hours ago, JenReg said:

The same has happened to me.

If you'd like us to help, we need you to provide more information. A link to the page on your website and a screenshot of your custom font CSS will help.

Hi there,

Where can I update this font text above? I see you are adding the word important to the text description. Where can I find this to do it? 

Hello Guys,

I set up a site in Squarespace 7.1 a few days back. Now client provide me with some custom fonts to use the entire site. Now when I upload those font files after generating the web font I got an "Invalid File type" error. 

@tuanphan can you help with my code please?

@font-face {
    font-family: 'BROTHER-Bold';
  src: url(https://static1.squarespace.com/static/645f4e72a313ef3a7b252e5c/t/64636fa859ab7a5334d47b31/1684238248999/BROTHER-Bold.otf)!important;
  }
h1 {
font-family: 'BROTHER-Bold';
}

h2 {
font-family: 'BROTHER-Bold';
}

@font-face {
    font-family: 'Gotham-Black';
  src: url(https://static1.squarespace.com/static/645f4e72a313ef3a7b252e5c/t/64637272326cc43acb71a43b/1684238962665/Gotham-Black.otf);
  }
h3 {
font-family: 'Gotham-Black';
}

h4 {
font-family: 'Gotham-Black';
}

Hey there!  I have been trying to get this font to work in CSS.  I have had it checked, and its still not working on my end although it has worked for someone else.

@font-face {
font-family: 'Le+Jour+Script';
src: url('https://static1.squarespace.com/static/5612928de4b0021af679b783/t/64bac27b09c1c841258bbf16/1689961083999/Le+Jour+Script.ttf');
}

thank you!

Hi- 

Tapping in --- same issue with custom fonts not loading correct.

I was able to get the custom fonts to load by adding the !important; code -- but the size values of the fonts is no longer correct. Ie; a 2em font is now HUGE on my page -- 

Squarespace: Should I move forward and resize my entire font system; or will the platform be autocorrecting this after the update?

Screenshot attached --- Thank you in advance. 
 

1 hour ago, kelseyjphotographyintl said:

I have been trying to get this font to work in CSS.

@font-face {
font-family: 'Le+Jour+Script';
src: url('https://static1.squarespace.com/static/5612928de4b0021af679b783/t/64bac27b09c1c841258bbf16/1689961083999/Le+Jour+Script.ttf');
}

Have you forgotten to post some of your CSS? Your post includes the first part of the CSS that is necessary to tell the site to expect a custom font file, but more CSS is required to tell the site how to use the file - for example should it be applied to heading1 or heading2 or paragraph text? Without this, the CSS you've posted won't do anything yet 🙂.

Same! I went in to my site to edit a typo in an accordion block, and the custom fonts stopped working. I hadn't even touched CSS.

2 minutes ago, KJweb said:

Same! I went in to my site to edit a typo in an accordion block, and the custom fonts stopped working. I hadn't even touched CSS.

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

I'm having the same issue.  My custom CSS header font stopped worked this morning without having any prior issues.  I tried the above suggestions but it hasn't fixed the problem unfortunately.