Custom Font Stopped Working For No Reason

The_Portland_Hearthbeat · January 16, 2023

My custom font has been appearing just fine since I first created my website, but a few days ago I noticed that it was suddenly replaced with a default typeface. I haven't edited my site recently and it was working after the last time I edited anything, so I'm stumped as to how something would have changed. It does give me an error: missing opening '{' . I don't believe that was there before (but again, I haven't edited anything in months and it's been appearing fine until a few days ago!)

Side note: I'm not a coder—I just taught myself how to do a few things to achieve what I wanted on my site. If this is a dumb questions, please be kind!

website: www.theportlandhearthbeat.com

Code:
____

// CUSTOM FONT
@font-face {
font-family: 'CooperLtBTBold';
src: url(https://static1.squarespace.com/static/62fdcff0d3262d503b0249a2/t/63c510a5c24fff7c9e600d9e/1673859237275/tt0579m_.ttf);
}

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

// Small or Tertiary Button //
.sqs-block-button-element--small, .sqs-button-element--tertiary {
font-family: Europa !important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
font-family: Europa !important;
}

// Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
font-family: Europa !important;
}

// Newsletter Form Title //
.newsletter-form-header-title {
font-family: CooperLtBTBold !important;
}

// Blog Page Post Title //
.blog-title {
font-family: CooperLtBTBold !important;
}

//-- Change the Color of the Header Social Icons
.header-actions-action--social .icon:hover svg {
fill: #b8855d !important;
}

//header button color
.header-actions .btn {
color: #fff !important;
border-color: #fff !important;
background-color: #40545c !important;
}

// Header button hover color
.header-actions .btn:hover {
background-color: #b8855d !important}

// header drop down
.header-nav-wrapper a:hover {
color: #fff !important;
background: #b8855d
}

// change header nav active style */
.header-nav-item--active a {
color: #b8855d !important;
background-image: none !important;
}

/* make nav folder not clickable */
.header-nav-folder-title {
pointer-events: none;
}

/* Colour of Hamburger Button */
.burger-inner > div {
background-color: beige;
}

//banner alt for mobile
#collection-62fdd070f3c0eb48abfd1dc5 {

@media only screen and (max-width: 640px){

#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)
.section-background {
background-image: url(https://static1.squarespace.com/static/62fdcff0d3262d503b0249a2/t/632e26ba6b07026561be24f6/1663968954273/_vertical_MobileMain2_MobileMain.png);
background-size: cover;
background-position: top;
background-repeat: no-repeat;

}
}
}

/* Horizontal Line */.sqs-block-horizontalrule hr {height: 2px}

//-- Create a rounded corner with border radius
.list-item[data-is-card-enabledhttps://static1.squarespace.com/static/62fdcff0d3262d503b0249a2/t/63c4ff9f9a84d678dbc47b2c/1673854879228/tt0579m_.ttf="true"] {border-radius:25px;
}

// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="630216ffa2c4c876a8bc5271"] {
display:none !important;
}
}
@media screen and (min-width: 641px) {
section[data-section-id="6305c0be700f8716832e4420"] {
display:none !important;
}
}

paul2009 · January 16, 2023

5 hours ago, The_Portland_Hearthbeat said:

a few days ago I noticed that [my custom font] was suddenly replaced with a default typeface. I haven't edited my site recently and it was working after the last time I edited anything, so I'm stumped as to how something would have changed. It does give me an error: missing opening '{' .

It looks like you've accidentally pasted the filename of a font into the middle of the CSS. If you delete the text I've highlighted in grey, it should fix it.

Did this help? Please give feedback by clicking an icon below ⬇️

Edited January 16, 2023 by paul2009

JaneJerardi · January 19, 2023

I'm having (maybe) a similar issue. Our site displayed our Custom CSS fine up until this morning and I haven't recently made any changes. Now suddenly the custom fonts are displaying. Any ideas? Did something change within Squarespace?

paul2009 · January 21, 2023

On 1/19/2023 at 6:09 PM, JaneJerardi said:

Our site displayed our Custom CSS fine up until this morning and I haven't recently made any changes. Now suddenly the custom fonts are displaying. Any ideas? Did something change within Squarespace?

Yes. If your CSS contains errors, it will no longer be processed as it could cause errors on the platform.

Check your Custom CSS panel to see if any hints or errors are shown in red text (see the example above) as this may help you to troubleshoot the problem. If you are unsure how to fix it, please post details of the CSS so that we can take a look.

Did this help? Please give feedback by clicking an icon below ⬇️

mschenese · July 26, 2023

Mine is no longer working either. My url is bridal.chenesebean.com

This is what I've been using the past year and now it's no longer working. I purchased the font files on Creative Market.

@font-face {

font-family: 'Blackstone';

src: url('https://static1.squarespace.com/static/620ee6b04327b345781b6540/t/64c078a4bd7da4096b0dbd84/1690335397109/Blackstone.woff');

}

h1 {font-family: 'Blackstone';}

pvangphotos · July 26, 2023

1 hour ago, mschenese said:

Mine is no longer working either. My url is bridal.chenesebean.com

This is what I've been using the past year and now it's no longer working. I purchased the font files on Creative Market.

@font-face {

font-family: 'Blackstone';

src: url('https://static1.squarespace.com/static/620ee6b04327b345781b6540/t/64c078a4bd7da4096b0dbd84/1690335397109/Blackstone.woff');

}

h1 {font-family: 'Blackstone';}

I was just able to fix mine; I had the same issue this morning!

Try:

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

tuanphan · July 26, 2023

Yes. Just add !important to the code, to override Squarespace Default Font

NewUser1234 · July 26, 2023

Good day, I have this "Soloist" that we are using here at Squarespace but today 26/07/2023 the font is no longer working. Is there someone here that have the same problem or do we have other workaround here. Thank you.

NewUser1234 · July 26, 2023

3 hours ago, NewUser1234 said:

Good day, I have this "Soloist" that we are using here at Squarespace but today 26/07/2023 the font is no longer working. Is there someone here that have the same problem or do we have other workaround here. Thank you.

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

paul2009 · July 26, 2023

2 minutes ago, aaniko said:

we have same issue with font

@aaniko @NewUser1234 If you'd like forum users to try to help:

1. We need you to provide a working link to the page on your website. How to Post a Forum Question explains how to do so.

2. The CSS must be installed on the site.

jeffmaeck · July 27, 2023

Hmmm looks like a lot of people are having the same font-related issue. I've copied and pasted a bunch of different css codes recommended here but couldn't get my font to come back - can anyone help me out please?

Up until this morning, the code below worked fine (and oddly enough, it still works on another Squarespace site I have), but I noticed an hour ago it's not working on one site in particular.

Any help is appreciated!

Thanks!

@font-face {

font-family: 'Oliver Quin';

src: url('https://static1.squarespace.com/static/633a55c472a7c845921e0f80/t/636c1139b7d0b2764f635735/1668026681090/oliver+quin.otf');

}

h4 {font-family: 'Oliver Quin';

font-size:40px}

h4 {

line-height: 40%;

}

tuanphan · July 27, 2023

46 minutes ago, jeffmaeck said:

Hmmm looks like a lot of people are having the same font-related issue. I've copied and pasted a bunch of different css codes recommended here but couldn't get my font to come back - can anyone help me out please?

Up until this morning, the code below worked fine (and oddly enough, it still works on another Squarespace site I have), but I noticed an hour ago it's not working on one site in particular.

Any help is appreciated!

Thanks!

@font-face {

font-family: 'Oliver Quin';

src: url('https://static1.squarespace.com/static/633a55c472a7c845921e0f80/t/636c1139b7d0b2764f635735/1668026681090/oliver+quin.otf');

}

h4 {font-family: 'Oliver Quin';

font-size:40px}

h4 {

line-height: 40%;

}

Change this line

h4 {font-family: 'Oliver Quin';  

font-size:40px}

to this

h4 {
  font-family: 'Oliver Quin' !important;  
  font-size:40px;
}

EmilyColorWord2023 · July 27, 2023

I'm having the same issue on my site. The custom Messapia font I uploaded has stopped working for no reason that I can see.

https://rieke-interiors.squarespace.com/home
PW: Rieke22023

//Custom Font
@font-face {

font-family: 'Messapia-Regular';

src: url(https://static1.squarespace.com/static/6478c1135616536aabce6667/t/6478ffd4b0aa4f086cfa87fe/1685651412825/Messapia-Regular.woff);

}

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

Any ideas? I'm stumped.

Edited July 27, 2023 by EmilyColorWord2023

EmilyColorWord2023 · July 27, 2023

Oh! I added the !important code and it appears to be working now. Appreciate you all.

//Custom Font
@font-face {

font-family: 'Messapia-Regular';

src: url(https://static1.squarespace.com/static/6478c1135616536aabce6667/t/6478ffd4b0aa4f086cfa87fe/1685651412825/Messapia-Regular.woff);

}

h1 {font-family: 'Messapia-Regular' !important;}
h2 {font-family: 'Messapia-Regular' !important;}
h3 {font-family: 'Messapia-Regular' !important;}
h4 {font-family: 'Messapia-Regular' !important;}

Edited July 27, 2023 by EmilyColorWord2023

REL · July 27, 2023

I am having the same issue with my fonts. I couldn't find an issue in my code so I deleted it to start over and without any custom css it shows an error. Is this a bug with squarespace?

paul2009 · July 27, 2023

13 minutes ago, REL said:

couldn't find an issue in my code so I deleted it to start over and without any custom css it shows an error. Is this a bug with squarespace?

Yes, this is a bug with the Custom CSS panel and has been occurring for at least the last four days. Please report it to Customer Care, as this will help to escalate the issue. Squarespace doesn’t use this forum to track bug reports.

Did this help? Please give feedback by clicking an icon below ⬇️

REL · July 28, 2023

Customer Service is saying its my custom code that is breaking it so I removed almost all code and just left the font but it's still not working. Does anyone see anything that is wrong that I can fix to make the fonts work.

@font-face {
font-family: Abril Fatface;
src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648532dc8a290f07e9c7c625/1686450908259/AbrilFatface-Regular.ttf);
}

h1 {
font-family: 'Abril Fatface';

}

h2 {
font-family: 'Abril Fatface';

}

h4 {
font-family: 'Abril Fatface';
}

@font-face {
font-family: Qwitcher Grypen;
src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648537426dbc992a228732d8/1686452034524/QwitcherGrypen-Regular.ttf);
}

h3 {
font-family: 'Qwitcher Grypen';
}

tuanphan · July 28, 2023

3 hours ago, REL said:

Customer Service is saying its my custom code that is breaking it so I removed almost all code and just left the font but it's still not working. Does anyone see anything that is wrong that I can fix to make the fonts work.

@font-face {
font-family: Abril Fatface;
src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648532dc8a290f07e9c7c625/1686450908259/AbrilFatface-Regular.ttf);
}

h1 {
font-family: 'Abril Fatface';

}

h2 {
font-family: 'Abril Fatface';

}

h4 {
font-family: 'Abril Fatface';
}

@font-face {
font-family: Qwitcher Grypen;
src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648537426dbc992a228732d8/1686452034524/QwitcherGrypen-Regular.ttf);
}

h3 {
font-family: 'Qwitcher Grypen';
}

Change to this code

@font-face {
	font-family: 'Abril Fatface';
src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648532dc8a290f07e9c7c625/1686450908259/AbrilFatface-Regular.ttf);
}
h1, h2, h4 {
	font-family: 'Abril Fatface' !important;
}
@font-face {
  font-family: 'Qwitcher Grypen';
  src: url(https://static1.squarespace.com/static/63efdbeb67886e70d01a5b06/t/648537426dbc992a228732d8/1686452034524/QwitcherGrypen-Regular.ttf);
}

h3 {
	font-family: 'Qwitcher Grypen' !important;
}

riversongisbae · January 16

I'm having the same issue , has anyone found a solution?

melody495 · January 16

20 minutes ago, riversongisbae said:

I'm having the same issue , has anyone found a solution?

Hi @riversongisbae, please describe what issue you are having so the community can try and help. Everyone that has posted here have had different issues.

blckswmp · April 12

Hey Im little late but I have same issue in One note. The fonts worked last night well and now when i select the font its name section just stays blank? Pretty wierd, anyone have found answer to this? Im having same problem but without code...

Edited April 12 by blckswmp

melody495 · April 12

19 hours ago, blckswmp said:

Hey Im little late but I have same issue in One note. The fonts worked last night well and now when i select the font its name section just stays blank? Pretty wierd, anyone have found answer to this? Im having same problem but without code...

Hi @blckswmp if you haven't used any code, then it doesn't sound like it is an issue with custom font, but rather with Squarespace's font.

Can you provide more details of the issue you are having (e.g. screenshots)? Or if the issue is with the platform, you can contact Squarespace's Support.

Edited April 12 by melody495

Custom Font Stopped Working For No Reason

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

paul2009

EmilyColorWord2023

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources