Jump to content

Custom Fonts Not Working

Go to solution Solved by Ziggy,

Recommended Posts

I'm at wit's end. I'm playing around with a site and cannot for the life of me get the custom fonts to appear. Doesn't matter which  browser I'm using. Where am I going wrong? This isn't the first site I've had issues with custom fonts lately.

https://katyblooms.squarespace.com

password for site is katy

 

// Custom Header Font //
@font-face {   
  font-family: Promenade-Regular;   
  src: url("https://static1.squarespace.com/static/6391abbbd6796d1f420dc91b/t/63f626ad6dabcc769280af89/1677076141930/Promenade-Regular.woff"); 
  src: url("https://static1.squarespace.com/static/6391abbbd6796d1f420dc91b/t/63f626b19c152d5aa7e4fe4b/1677076145724/Promenade-Regular.woff2"); 
}

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

Link to comment

You have two sources (SRC:) set for the font, that might be causing a conflict, does removing one or the other help?

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
20 minutes ago, ShannonPruitt said:

This isn't the first site I've had issues with custom fonts lately.

I've heard the same thing quite a few times recently.

When I view the page it does appear to be loading correctly, are you on a Mac?

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

Could you find and test using a .TTF (true type font) file format for the font instead of .woff?

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

Where did you get the font from? I'm wondering if there could be an issue with the font file. There's nothing wrong with your upload method and CSS. Could you share it with me so I can run my own tests?

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

Having the exact same problem. Pretty sure my CSS is all fine? But fonts not showing up for me

font-face {
font-family: 'JOSTBOLD';
src: url('https://static1.squarespace.com/static/63f62f0c2a8ce83838e369cb/t/63f634513a455825bcf03e16/1677079633807/Jost-Bold.ttf');
}
font-face {
font-family: 'JOSTSEMIBOLD';
src: url('https://static1.squarespace.com/static/63f62f0c2a8ce83838e369cb/t/63f6345f9d91452ffc4842c7/1677079648245/Jost-SemiBold.ttf');
}
font-face {
font-family: 'JOSTMEDIUM';
src: url('https://static1.squarespace.com/static/63f62f0c2a8ce83838e369cb/t/63f6346a32d2915055e85725/1677079659292/Jost-Medium.ttf');
}

h1 {font-family: 'JOSTBOLD';}

h2 {font-family: 'JOSTSEMIBOLD';}

h3 {font-family: 'JOSTSEMIBOLD';}

h4 {font-family: 'JOSTMEDIUM';}

.sqsrte-large {font-family: 'JOSTMEDIUM';}

p {font-family: 'JOSTMEDIUM';}

.sqsrte-small {font-family: 'JOSTMEDIUM';}

Link to comment
  • Solution

@ShannonPruitt I'm not sure if something changed in Squarespace's backend, but I would try re-uploading the font files and relinking the URL in the CSS, hope that works!

Edited by Ziggy

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
1 hour ago, Jessica23 said:

Having the exact same problem. Pretty sure my CSS is all fine? But fonts not showing up for me

font-face {

@Jessica23 Your CSS is wrong.

You are missing the '@' symbol before each 'font-face'. It should be @font-face.

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

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
2 hours ago, ShannonPruitt said:

I'm playing around with a site and cannot for the life of me get the custom fonts to appear.

@ShannonPruitt When I checked, the font file URLs didn't work. I recommend that you check these files have been uploaded correctly in the Custom CSS panel.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 4 months later...

So I have the same problem but already checked if it's not one of the upper issues. I did the website probably 2 months ago and the uploaded custom font stopped working while I was fixing other things. Today I decided to give it another chance before changing to something else and I deleted the url and loaded it again from 'select custom files'

The font started working again and it's not just on my side bc I was talking to someone else and there also was working. 4 hours later - the font is no show - tried the same process as earlier - it doesn't work too

website: marianadankova.com

 

@font-face {
font-family: 'Amely';
src: url('https://static1.squarespace.com/static/641c576fb51b070c95601e4f/t/64c07cdb22745b3f33dcac63/1690336475499/Amely.otf');
}


/* additional styles */
h4 {
font-family: 'Amely';
text-transform: none;
font-weight: 400;
font-style: normal;
text-align: left;
color: #D3BB8F
}

I would appreciate it if someone helps me.

Link to comment
11 hours ago, MarieD said:

So I have the same problem but already checked if it's not one of the upper issues. I did the website probably 2 months ago and the uploaded custom font stopped working while I was fixing other things. Today I decided to give it another chance before changing to something else and I deleted the url and loaded it again from 'select custom files'

The font started working again and it's not just on my side bc I was talking to someone else and there also was working. 4 hours later - the font is no show - tried the same process as earlier - it doesn't work too

website: marianadankova.com

 

@font-face {
font-family: 'Amely';
src: url('https://static1.squarespace.com/static/641c576fb51b070c95601e4f/t/64c07cdb22745b3f33dcac63/1690336475499/Amely.otf');
}


/* additional styles */
h4 {
font-family: 'Amely';
text-transform: none;
font-weight: 400;
font-style: normal;
text-align: left;
color: #D3BB8F
}

I would appreciate it if someone helps me.

found the answer today - !important was missing from the h4

Link to comment

Hey team - same problem here 🥲 Custom fonts displaying fine, until recently - not sure exactly when but I noticed it today. It seems to only be affected H1 and H2. Any help would be incredibly appreciated 🙏

Here's the code I'm using:

@font-face {
  
font-family: 'Summer Loving';

src: url(https://static1.squarespace.com/static/62f3967f3e3ae368609e2ae8/t/64c12dbdc08b6f7d4a6e2955/1690381762943/SummerLoving.otf);
  
}

h1 {
font-family: 'Summer Loving';}

h2 {
font-family: 'Summer Loving';}

// Site Title //
.header-title-text a {
  font-family: 'Summer Loving';
}

To pre-emptively answer some of the Qs from above!

- I bought the font from Creative Market a few years ago this if the first issue I've had!

- I'm on a mac, using Chrome

- I removed, re-uploaded and re-linked the font file but no dice

- I used to have !important in the Site Title section, but removed it as I saw in another forum post that was the issue, but no fix (perhaps I need it in another place?)

Thanks in advance for any wisdom!

Link to comment

Squarespace is making some back-end updates to the fonts and how they are applied, for now you will have to use !important to force them to work:

@font-face {
  font-family: 'Summer Loving';
  src: url(https://static1.squarespace.com/static/62f3967f3e3ae368609e2ae8/t/64c12dbdc08b6f7d4a6e2955/1690381762943/SummerLoving.otf);
}

h1 {
  font-family: 'Summer Loving' !important;
}

h2 {
  font-family: 'Summer Loving' !important;
}

// Site Title //
.header-title-text a {
  font-family: 'Summer Loving' !important;
}

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

Hi! I'm also having the same issue... the same custom heading font is working fine on another (live) website but I'm having trouble with this on one I'm designing now. The 'fresh styles' text should be H4 in a script font. 

Code below: 

// La Luxes Script upload //
font-face {
font-family: 'LALUXES';
src: url('https://static1.squarespace.com/static/6481c2b9614bdc3272a8d4a5/t/64c171fe084d1343cf9f2a0e/1690399230708/La+Luxes+Script.ttf');
}
h4 {
  font-family: 'LALUXES' !important;
}

url: https://tambourine-alpaca-6xhn.squarespace.com/home-1

password: password

 

Thank you 

Screenshot 2023-07-26 at 20.23.03.png

Link to comment

Try adding this in front of the h4:
[data-website-fonts]

i.e.

[data-website-fonts] h4 {
  font-family: 'LALUXES' !important;
}

You also need an @ in front of the font-face {

@font-face {
  font-family: 'LALUXES';
  src: url('https://static1.squarespace.com/static/6481c2b9614bdc3272a8d4a5/t/64c171fe084d1343cf9f2a0e/1690399230708/La+Luxes+Script.ttf');
}

Hope those changes work for you!

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

My leading suddenly evaporated - using Paragraph 1. Type is virtually sitting on top of each other, line-by-line. Incredibly unsettling. Apologies if this is the wrong forum. Anyone have any updates as to why this suddenly changed and when a fix will be automatically made?

Link to comment
On 7/27/2023 at 11:18 AM, Gddy said:

My leading suddenly evaporated - using Paragraph 1. Type is virtually sitting on top of each other, line-by-line. Incredibly unsettling. Apologies if this is the wrong forum. Anyone have any updates as to why this suddenly changed and when a fix will be automatically made?

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.