Custom font not working

43 minutes ago, louis1996 said:

Hi all,

I previously had a custom font for head h1 headers on my site, however it doesn't seem to be loading anymore. Would anyone know why this might have happened and what I can do to change it? It has defaulted to Poppins for titles on my gallery slideshow on the homepage.

Thanks in advance!

I figured it out – I was missing !important; in my code:
 

@font-face {
font-family: FONT-NAME;
src: url(FONT-URL);
}
h1, h2, h3, h4, p { font-family: 'FONT-NAME' !important;}

When I added !important it worked again. Hope that helps, I'm not a pro in this.

Here is the response I received from Customer Support.  Disappointing that they have no ETA to resolve the issue with a feature I consider to be critical for branding purposes.

@genah @tuanphan

Thank you very much for your answer Paul. Unfortunatelly none of this code options work with the webs that I have problems.... In fact, the code in general does not work on this website: javierpereira.com. Its quite strange, because in other website that I manage of other clients works perfectly...

25 minutes ago, lanuevacreativa said:

Thank you very much for your answer Paul. Unfortunatelly none of this code options work with the webs that I have problems.... In fact, the code in general does not work on this website: javierpereira.com. Its quite strange, because in other website that I manage of other clients works perfectly...

 

 

 

 

If you mean font size, use this code (you missing !important)

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

if custom font, which code did you use?

25 minutes ago, tuanphan said:

If you mean font size, use this code (you missing !important)

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

if custom font, which code did you use?

I use an standar font without code: Aglet Mono.

See other example... movimientocoherente.com

I use the code that you´ve proposed but nothing changes...

46 minutes ago, lanuevacreativa said:

I use an standar font without code: Aglet Mono.

See other example... movimientocoherente.com

I use the code that you´ve proposed but nothing changes...

I see it worked here. Try checking in live mode

Hey! My custom fonts also just stopped working out of nowhere. 

See below: 

//cutom fonts // 

@font-face {
font-family: 90reg;
src: url(https://static1.squarespace.com/static/6285734ab0d7af5d635da8d9/t/62ee92fe71716a77fca514b1/1659802366107/PerfectlyNineties-Regular.otf);
}

h1,h2,h4 {
font-family: '90reg';
}

h3 {
font-family: 'script';
}

@font-face {
font-family: 'script';
src: url('https://static1.squarespace.com/static/6285734ab0d7af5d635da8d9/t/633492a05b62b346df387027/1664389792145/Bettina+Signature+Regular.otf');
}

//list fonts for services//

@font-face {
  font-family: '90reg';
  src: url(https://static1.squarespace.com/static/6285734ab0d7af5d635da8d9/t/62ee92fe71716a77fca514b1/1659802366107/PerfectlyNineties-Regular.otf);
}

Have a look through this forum post, this topic is being discussed a lot right now!

Basically, you need to try adding !important after the font properties. Then save and refresh the page.

Hi,

I understand there is an overall issue with custom fonts.  I've gone in and added the CSS code to each lne but I receive 'Syntax Error on Line 2' and the edits not being saved. 

This is what Line Two looks like so unsure where the issue is.

@font-face {
font-family: Kristopher;!important;
src: url(https://static1.squarespace.com/static/63f7cd1462ebb57fd8fe6dbe/t/63f8dd7407490d1844349cc7/1677254004682/Vintage+Voyage+Design+Supply+-+Kristopher+Regular.otf);
}

Thank you, 

https://rydawell.com/ My page was fine, not sure how this happened. I found a video from a couple months ago showing what it used to look like when the site formatting was working properly. I did do any editting or formatting. Any ideas?!?! Thanks in advance.  

Would it be better to wait until the Squarespace fixes the issue? Will they announce what the fix is? 

Folks. In addition to SS making changes to how fonts are handled in CSS sites, CSS wise, the Custom CSS editor is also experiencing issues. It erroneously reports syntax errors and no longer does live updates for your custom CSS. You have to save, then reload the site, then check that the CSS you changed is working, as a work around.

Also contact SS customer support and get your complaints in about the CSS editor not working properly.

Please see the following.

6 hours ago, tuanphan said:

I see it worked here. Try checking in live mode

Now it works!!! Thank you very much for all your help!

Hey! I’m having the same problem, the custom ccs is broken across my whole site. I’m not a coder myself so feel pretty clueless. The “!important” add isn’t working and when I spoke to Squarespace their reply was vague and said they don’t have a timeline as to when it will be fixed. I’m not too sure what to do, but I’m pretty desperate to get this fixed. Any other advice on code fixes? 

Hi there, I've created my new website (www.thesitehouse.be) and used 'Editors Note', a font by Jen Wagner. I combine the bold and the italic font. I've used the code below to italicize some words in the sentences. When I look on mobile, it seems that it doubles the italic font / or the italization. I've added an example in the annex. On desktop it looks great, like it should be. 
Is there anybody who can help me looking into this? 

Code used now = 

--- 
 

h1 {
font-family: 'EDITORS NOTE BOLD';
}

h1 em { 
font-family:'EDITORS NOTE ITALIC';
}  

h2 {
font-family: 'EDITORS NOTE BOLD';
}

h2 em { 
font-family:'EDITORS NOTE ITALIC';
}  

h3 {
font-family: 'EDITORS NOTE BOLD';
}

h3 em { 
font-family:'EDITORS NOTE ITALIC';
}  

Thank you so much for taking the time to read and hopefully help :)

I have not touched the custom css on my website and suddenly after just happening to check my website all the custom font on mobile and desktop was all out. In the squarespace site itself it looked ok but it's not when it came to the end user if that makes sense. It looked like the following code had been added at the end of my custom css:

#collection-61636ffba02688618dbe6907 a {   text-decoration: none !important;
}

Why would this be added?? and by who/how??

Many thanks

Since the font is italicized you could try adding this to the h1 em, h2 em so that the browser doesn't add further italicisation:

font-style: normal;

like this:

h1 em, h2 em, h3 em { 
  font-family:'EDITORS NOTE ITALIC';
  font-style: normal;
}  

I wondered if anyone might be able to help with my code, it's been a couple of days now and I can't seem to get !important to work (unfortunately very new to code!). Is it worth hiring a new web designer to re-write the code or could this be fixed? Thanks so much 

@font-face {   
font-family: 'ayer-semibold-web'!important;   
src: url(https://static1.squarespace.com/static/62dece28a0794006e85935a2/t/62f11d20be6083115432554b/1659968800087/Ayer-Semibold-Web.woff);}

@font-face {   
font-family: 'ayer-mediumitalic-web'!important;   
src: url(https://static1.squarespace.com/static/62dece28a0794006e85935a2/t/62f11d2ba1d87544b2dbf478/1659968811905/Ayer-MediumItalic-Web.woff);}

h1 {
font-family: 'ayer-semibold-web'!important;}

h1 em {
  font-family: 'ayer-mediumitalic-web'!important;}

h2 {
font-family: 'ayer-semibold-web'!important;}

h2 em {
  font-family: 'ayer-mediumitalic-web'!important;}
h3 {
font-family: 'ayer-semibold-web'!important;}

h3 em {
  font-family: 'ayer-mediumitalic-web'!important;}

h4 {
font-family: 'ayer-semibold-web'!important;}

h4 em {
  font-family: 'ayer-mediumitalic-web'!important;}

.white.item-pagination[data-collection-type^="blog"] .item-pagination-title {
  font-family: 'ayer-mediumitalic-web'!important;}

h1.ProductItem-details-title {
    font-family: 'ayer-mediumitalic-web'!important;
   font-size: 40px;
}

.collection-type-products .grid-title {
    font-family: 'ayer-mediumitalic-web'!important ; 
   font-size: 32px;
}

.blog-item-wrapper .blog-item-title h1.entry-title {
  font-family: 'ayer-semibold-web'!important ;
  text-transform: uppercase;

3 hours ago, JMR__ said:

Is it worth hiring a new web designer to re-write the code or could this be fixed? Thanks so much 

From looking here, I'm not seeing anything wrong with your code. Squarespace has supposedly finished with their updates. If you try removing your code, refreshing your browser and then replacing the code, hopefully it'll start working. Could you share your website URL?

The custom font stopped working, tried adding in !important but hasn't changed anything. any help is much appreciated 

@font-face {font-family: COOPERBTBLACK;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63e55ca1d20bd21f9d3882e6/1675975841585/Cooper+BT+Bold.otf4e228/1677279696959/Cooper+BT+Black+Italic.otf);}

@font-face {font-family: COOPERBTBOLD;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63e55ca1d20bd21f9d3882e6/1675975841585/Cooper+BT+Bold.otf);}

@font-face {font-family: COOPERBTMEDIUM;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63e55cbd7221f046b7f3a8aa/1675975869404/Cooper+BT+Medium.otf);}

@font-face {font-family: COOPERBTLIGHT;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63e55caf8d4f4403405280af/1675975855690/Cooper+BT+Light.otf);}

@font-face {font-family: RadomirTinkovGilroyRegular;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63f93ab082710746ad87fce1/1677277872289/Radomir+Tinkov+-+Gilroy-Regular.otf);}

@font-face {font-family: RadomirTinkovGilroyMedium;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63f93ae11e11de0b02090fe3/1677277921960/Radomir+Tinkov+-+Gilroy-Medium.otf);}

@font-face {font-family: RadomirTinkovGilroySemiBold;src: url(https://static1.squarespace.com/static/63d46efe40e3597a04122840/t/63f93ac79c55a83aa357228f/1677277896217/Radomir+Tinkov+-+Gilroy-SemiBold.otf);}

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

h1 {font-family: 'COOPERBTLIGHT';}

h2 {font-family: 'COOPERBTLIGHT';}

h3 {font-family: 'COOPERBTLIGHT';}

h4 {font-family: 'COOPERBTBLACK';}

sqsrte-large {font-family: 'RadomirTinkovGilroyMedium';}

p {font-family: 'RadomirTinkovGilroyMedium';}

sqsrte-small {font-family: 'RadomirTinkovGilroyMedium';}

a {font-family: 'RadomirTinkovGilroyMedium';}

Please help!!! Just want the Custom CSS Font settle for mobile and desktop

Please help!!! Just want the Custom CSS Font settle for mobile and desktop

Site: https://fox-porpoise-cxb8.squarespace.com/

password: 12341234

Here is my CSS code:

@font-face {
    font-family: 'VisbyCF-Medium';
       src: url('https://static1.squarespace.com/static/64c9fa3a491634774dde60da/t/64c9fb2589fbbf797c068d64/1690958630117/VisbyCF-Medium.ttf');
    font-family: 'VisbyCF-ExtraBold';
       src: url('https://static1.squarespace.com/static/64c9fa3a491634774dde60da/t/64c9fb359ecd6242f7801bd0/1690958646165/VisbyCF-ExtraBold.ttf');
  }
.ProductItem .ProductItem-details h1.ProductItem-details-title {font-family: 'VisbyCF-Medium';}
.ProductItem .ProductItem-details .product-price, .ProductItem .ProductItem-details .product-price .original-price .sqs-money-native {font-family: 'VisbyCF-Medium';}
.products.collection-content-wrapper .grid-main-meta .grid-title {font-family: 'VisbyCF-Medium'!important;}
.products.collection-content-wrapper .grid-main-meta .grid-prices {font-family: 'VisbyCF-Medium'!important;}

h1 {font-family: 'VisbyCF-ExtraBold'!important;}
h2 {font-family: 'VisbyCF-ExtraBold'!important;}
p {font-family: 'VisbyCF-Medium'!important;}
.site-wrapper {font-family: 'VisbyCF-Medium'!important;}
//DESKTOP//
.header-nav-item a {
    font-family: 'VisbyCF-ExtraBold'!important;
}

//MOBILE//
.header-menu-nav-item a {
    font-family: 'VisbyCF-ExtraBold'!important;
}

3 hours ago, patrickchan1212 said:

Please help!!! Just want the Custom CSS Font settle for mobile and desktop

For what it's worth, the fonts are working correctly for me when I view your website.

Hi all, fairly newbie here, trying to work out adding 4 custom fonts to my web design and having trouble, have updated the custom CSS with the below, but when I go to site styles, and search fonts. nothing comes up. I am not a coder by any means, so Im sure ive stuffed up somewhere, any help would be super appreciated 🙂 

woops, here they are

@font-face {   
font-family: 'Formula1reg';   
src: 
url(https://static1.squarespace.com/static/64d3272a7540b7223ebe84b3/t/64d328963fdb464f675689fc/1691560087571/Formula1-Regular.ttf);}
@font-face {   
font-family: 'Formula1bold';   
src: url(https://static1.squarespace.com/static/64d3272a7540b7223ebe84b3/t/64d3284d7286a241e32e53c5/1691560014606/Formula1-Bold.ttf);}
@font-face {   
font-family: 'Formula1black';   
src:url(https://static1.squarespace.com/static/64d3272a7540b7223ebe84b3/t/64d3284d3fdb464f67568953/1691560014606/Formula1-Black.ttf);}
@font-face {   
font-family: 'Formula1wide';   
src:url(https://static1.squarespace.com/static/64d3272a7540b7223ebe84b3/t/64d3284ddc08f141cdedc787/1691560014285/Formula1-Wide.ttf);}
h1 {
font-family: 'Formula1';}

have i dont this right? 

52 minutes ago, lenard0 said:

when I go to site styles, and search fonts. nothing comes up

You cannot upload to the library. All you can do is upload the fonts in CSS and then assign them in CSS. It looks like you've referenced the different fonts with @font-face correctly, and you've started assigning correctly here:

h1 {
  font-family: 'Formula1';
}

You just need to do the same for any other fonts, and font styles, this works for bolded Heading 1 as an example:

h1 strong {
  font-family: 'Formula1bold';
}