Jump to content

Custom Fonts

Go to solution Solved by SummerKateDesigns,

Recommended Posts

I have added custom fonts to my site using import in the custom css section. The custom fonts show up when I view the site on my laptop (where the custom font files were originally) however if I view on my mobile or iMac, these custom fonts do not show up and revert to a different font? How can I have my custom fonts showing on all devices? 

Sitewide password: Aliceandalec2023!

Link to comment

Can you share your website URL? As well as the CSS you've used?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy Yes sorry, I thought I added the URL in my post.

URL is https://copper-chicory-9r99.squarespace.com/

Sitewide password is in my original post. 

Here is my css I have used:

@font-face {
font-family: 'Affinity Alt' !important;
src: url(https://static1.squarespace.com/static/64225eb00f41a7069b5e07a7/t/6423aaef68e49f0aa4c27e30/1680059119774/Affinity+All+Caps+Italic.ttf/);
}

h4 {
  font-family: 'Affinity Alt' !important;
  text-transform: none;
  text-decoration: none;
  font-size: 75px; 
  letter-spacing: 0; 
  line-height: 1.2em;
  margin: 0;
  padding: 0; 
}

Link to comment
On 4/27/2023 at 8:26 AM, SummerKateDesigns said:

however if I view on my mobile or iMac, these custom fonts do not show up and revert to a different font?

This suggests that they are showing up only because you have the font installed on the computer that you are working on, can you try this version of the code you shared?

@font-face {
font-family: Affinity-Alt;
src: url('https://static1.squarespace.com/static/64225eb00f41a7069b5e07a7/t/6423aaef68e49f0aa4c27e30/1680059119774/Affinity+All+Caps+Italic.ttf');
}

h4 {
  font-family: Affinity-Alt;
  text-transform: none;
  text-decoration: none;
  font-size: 75px; 
  letter-spacing: 0; 
  line-height: 1.2em;
  margin: 0;
  padding: 0; 
}

 

Can you also check and reupload the font file, when I downloaded it from your website, my computer didn't recognize it as a font file, so you may have a corrupted file, which could explain the error.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy I have re-uploaded the font file and tried your code and still getting the same issue. Can see the custom font on my laptop but not on my other devices. Do you know if a TTF font is supported on squarespace? The font was downloaded and purchased through Creative Market so I would have assumed this would be a correct file? 

Link to comment
2 hours ago, SummerKateDesigns said:

@Ziggy I think it must be a corrupt file, I have downloaded a new font and installed it like I did the last font and it seems to be working 

Glad to hear that was the issue and you've got it working now!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.