Custom font uploaded through CSS working on my computer but not on any other devices (Squarespace 7.1)

Hello, 

I've looked for this answer on the forum but can't seem to find it anywhere. 

I followed instructions on how to upload a custom font on my website, and everything seems to have worked fine. I then opened the website on another computer - that isn't logged into my Squarespace account or even a different browser on my PC and my website doesn't use the custom font. Is there any way to fix this?

I'm using .woff2 files for the custom upload. I've attached two screenshots of the same page from two different computers. This seems to only be affected on the custom font (H1, H2, H3, H4), and all other fonts used within Squarespace work fine. 

I'm also not sure if it's meant to change, but when I uploaded the custom font - in the site styles section, the custom font didn't update - however it was working on my website so I didn't think much of it. I have also attached a screenshot of this - the name of my custom font is SeriousNostalgic. 

Also my website is password protected at the moment | password: hello2024 

Thank you in advance! 

Can you share your website URL?

I can see that you've uploaded and referenced the custom fonts with @font-face but have you assigned the font to your headings? When you upload a custom font, it will not populate in the fonts menu, it can only be assigned in Custom CSS.

Hi @Devinaaa You might have included your site url in your forum post, but it is not shown alongside your post. Please share and happy to have a look.

Echoing @ziggy, have you told SquareSpace how you want to use your custom font? I see a lot of custom font questions on the forum, I've actually made a Beginner's Guide to cover everything and some common issues. Have a look at this step see if it helps Using your Custom Font.

Hope it helps, let me know how it goes.

Hi @Ziggy & @melody495

Thank you for your response!
My URL: https://www.devinamodi.com/ - 
Password: hello2024 

@font-face {
font-family: 'SeriouslyNostalgic';
src: url(https://static1.squarespace.com/static/655f4bea3b9b12335ee2d400/t/655fbadee3203141d1f5f780/1700772574022/Seriously+Nostalgic.woff2);
}

@font-face {
font-family: 'SeriouslyNostalgicItalics';
src: url(https://static1.squarespace.com/static/655f4bea3b9b12335ee2d400/t/655fbae3de202c207a9abe2a/1700772579433/Seriously+Nostalgic+Italic.woff2);
}
  
h1, h2, h3, h4, h5 {
  font-family:'SeriouslyNostalgic' !important;
}

a {
text-decoration: none !important;
}

Here is the code that I have in my custom CSS section! I'm quite new to this, so let me know if there is any additional information I can provide here! 

Also, thank you Melody for the link - I will be looking through it now. 
Thanks in advance 

2 hours ago, Devinaaa said:

Hi @Ziggy & @melody495

Thank you for your response!
My URL: https://www.devinamodi.com/ - 
Password: hello2024 

Here is the code that I have in my custom CSS section! I'm quite new to this, so let me know if there is any additional information I can provide here! 

Thanks for the link. Your Custom CSS code looks ok. I opened it up on my chrome browser on windows, the "Out of Context" looks like your second screen shot (which I believe is the wrong one).

Just checking, did you have to buy this font? Did you buy the web-safe font package? 

Hi @melody495, 

Thank you for your response, & yes the second screenshot is the incorrect font. 

Yes, I purchased a commercial license for the font - for both web and desktop. 

In my font folder I also have access to a .css, .eot, .HTML, .woff, and .woff2 - do you think I should maybe upload a different version of the font instead of the .woff2? 

Look forward to hearing from you 

15 minutes ago, Devinaaa said:

Yes, I purchased a commercial license for the font - for both web and desktop. 

In my font folder I also have access to a .css, .eot, .HTML, .woff, and .woff2 - do you think I should maybe upload a different version of the font instead of the .woff2? 

Let's try that!

Can you try replacing your code with the below? Add the .woff and .eot files to replace UPDATE in url().

Does it have a .otf or .ttf file? If yes, replace .eot file with .ttf file.

@font-face {
	font-family: 'SeriouslyNostalgic';
	src: url(https://static1.squarespace.com/static/655f4bea3b9b12335ee2d400/t/655fbadee3203141d1f5f780/1700772574022/Seriously+Nostalgic.woff2),
		url(UPDATE.woff),
		url(UPDATE.eot),
		serif;
}

Let me know how it goes.

@melody495 Thank you for your response! 

So I didn't have ttf. so I used the otf. instead of .eot - I hope that's alright. 
However, & this is weird - I tested on a different computer, browser, and two phones. 

It works on all but on one iPhone it's still the incorrect font, I refreshed a few times and tried - I'm not sure why that could be. But I think this should be good enough. 

Thank you for your all your help! 

4 minutes ago, Devinaaa said:

So I didn't have ttf. so I used the otf. instead of .eot - I hope that's alright. 
However, & this is weird - I tested on a different computer, browser, and two phones. 

Great! On my browser and android phone, they now look like your first screenshot 🙂 strange though, did you reupload/re-add the .woff2 file? My browser is using the .woff2 file, same as previously, but now the font file looks correct, whereas it didn't before.

5 minutes ago, Devinaaa said:

It works on all but on one iPhone it's still the incorrect font, I refreshed a few times and tried - I'm not sure why that could be. But I think this should be good enough. 

Aha! what browser is the iPhone using? Is it safari? You can try my answer to another poster here. Unfortunately I don't have an iPhone to test. If you do try, do let me know how it goes. works/didn't work.

@melody495
Yeah, I by mistake deleted the .woff2 so I re-uploaded it, but ended up switching to SeriouslyNostalgic vs. SeriouslyNostalgic Fine 
 

I have an iPhone 13 which is not working - but on my partner's iPhone 15 it works fine. But I will have a look at this article and see if I can make changes - will definitely let you know if it works! 

Thanks so much for all your help

5 minutes ago, Devinaaa said:

@melody495
Yeah, I by mistake deleted the .woff2 so I re-uploaded it, but ended up switching to SeriouslyNostalgic vs. SeriouslyNostalgic Fine 

Ok perfect! Yeah it's using the .woff2 fine for me, and that should be ok for most browsers. But at least you now have backup files if any browsers ever need them.

Re-uploading the font file is the second most common thing to resolve custom font issues in my blog 😄

5 minutes ago, Devinaaa said:

iPhone 13 which is not working - but on my partner's iPhone 15 it works fine. But I will have a look at this article and see if I can make changes - will definitely let you know if it works! 

Seems to be the way iPhone 13 render fonts. Let me know how it goes if you have an update.

On 1/6/2024 at 7:18 PM, Devinaaa said:

I will have a look at this article and see if I can make changes - will definitely let you know if it works! 

Hi, did you try this out?

I think you can add the below to wherever you are using the custom font, I chose h1 as an example

h1 {
    font-family: 'your font';    
    -webkit-font-smoothing: antialiased; //add this line
}

Let me know how it goes or if you have any questions.

@melody495

Hi Melody, sorry for the late reply - I was traveling and didn't have my computer with me for the last week - 10 days, so didn't get a chance to try it. 

I tried the code but it didn't seem to work - I've also now understood that the custom font does not work with older devices - phones & computers - so I'm wondering if this code still applies. 

Let me know! Otherwise, at this rate - I'm trying to find an alternative font, however it would be unfortunate since this is the same font as my logo and full brand kit. 

4 hours ago, Devinaaa said:

@melody495

I've also now understood that the custom font does not work with older devices - phones & computers - so I'm wondering if this code still applies. 

Hi @Devinaaa, what do you mean by "does not work with older devices"? Do you mean your specific font? From where did you learn that?

I have a similar question @melody495.  I uploaded the Asbigan webfont .woff2 which has a very distinctive cursive connected element for some of the letters, shown here in black ink. I am brand new to customizing fonts on squarespace or any "coding" so your guidance massively appreciated.  www.willsonwaller.com

I updated the custom code to reflect it should use Asbigan for h1, h2, h3 and it did, sort of.  The site definitely is using the Asbigan font for headers (shown in blue below) but is NOT showing the ligature of the connected letters, so odd. 

I have logged out and logged back in, looked on mobile, etc. and no cursive element of the font is working, just the asbigan letters.  p.s. the only reason you are seeing the cursive ligature on the homepage is that is a screenshot I uploaded.  The Services page has the text on page.

Update one day later -- I was able to go into the font itself on my hard drive and copy/paste the ligature letters but if I were to just type in Squarespace none of the ligatures come out.  Our Services in blue below is how it looks if I just type.  Copy/Paste will be too laborous to do all the time, really want to "fix" the ligature part of the font. Thank you!

On 5/11/2024 at 5:40 PM, WallerInc said:

I updated the custom code to reflect it should use Asbigan for h1, h2, h3 and it did, sort of.  The site definitely is using the Asbigan font for headers (shown in blue below) but is NOT showing the ligature of the connected letters, so odd. 

Hi @WallerInc This seems to be because your letter spacing is not zero. Try adding this line to your Custom CSS, see below. Let me know how it goes.

h1, h2, h3 {
    font-family: 'Asbigan';
    letter-spacing: 0;
}

@melody495 You are simply AMAZING!  That worked beautifully.  Thank you so very much for your time and smarts!

2 hours ago, WallerInc said:

@melody495 You are simply AMAZING!  That worked beautifully.  Thank you so very much for your time and smarts!

You are very welcome! Glad it's working for you 🙂