Jump to content

Custom font not appearing properly

Recommended Posts

Hello hello,

A custom font I'm using doesn't appear as intended when sending to client. It's just displaying as a generic default font.

I have used !important; tags but I can't seem to be getting it working.

password: notwelcome

Any help would be much appreciated as I've been round the houses.

Many thanks

Link to comment

Can you share what you've done so far?

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

Sure, thanks for responding. See below, potentially a mess.

It works on my device when I test in a different browser (Safari) but on other devices the fonts aren't appearing correctly.

// Custom fonts //

@font-face {

    font-family: 'Aeonik-Regular'!important;

       src: url('FontURLhttps://static1.squarespace.com/static/654b7386d58ebe2acd99e787/t/655391daf904fa4a9390a54f/1699975642340/Aeonik-Regular.ttf');

  }

@font-face {

    font-family: 'TomatoGrotesk-Regular'!important;

       src: url('https://static1.squarespace.com/static/654b7386d58ebe2acd99e787/t/6554e1bcd4803d75cd44509a/1700061629211/TomatoGrotesk-Regular.otf');

}

[data-website-fonts] h1 {
  font-family: 'https://static1.squarespace.com/static/654b7386d58ebe2acd99e787/t/655391daf904fa4a9390a54f/1699975642340/Aeonik-Regular.ttf' !important;
}

h1 {

  font-family: 'Aeonik-Regular' !important;

  font-weight: 500;

  font-style: none;

  font-size: 18px;

  letter-spacing: 0.01em;

  text-transform: none;

  line-height: 1.2em;

}

h2 {

  font-family: 'Aeonik-Regular' !important;

  font-weight: 400;

  font-style: none;

  font-size: 30px;

  letter-spacing: 0.01em;

  text-transform: none;

  line-height: 1.2em;

}

h3 {

  font-family: 'Aeonik-Regular'!important;

  font-weight: 400;

  font-style: none;

  font-size: 18px;

  letter-spacing: 0.00em;

  text-transform: none;

  line-height: 1.2em;

}

h4 {

  font-family: 'TomatoGrotesk-Regular'!important;

  font-weight: 400;

  font-style: none;

  font-size: 12px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  line-height: 1.2em;

}

Link to comment

You have a few errors, I've corrected what I can see here:

// Custom fonts //

@font-face {
  font-family: 'Aeonik-Regular' !important;
  src: url('https://static1.squarespace.com/static/654b7386d58ebe2acd99e787/t/655391daf904fa4a9390a54f/1699975642340/Aeonik-Regular.ttf');
}

@font-face {
  font-family: 'TomatoGrotesk-Regular' !important;
  src: url('https://static1.squarespace.com/static/654b7386d58ebe2acd99e787/t/6554e1bcd4803d75cd44509a/1700061629211/TomatoGrotesk-Regular.otf');
}

h1 {
  font-family: 'Aeonik-Regular' !important;
  font-weight: 500;
  font-style: none;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2em;
}

h2 {
  font-family: 'Aeonik-Regular' !important;
  font-weight: 400;
  font-style: none;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2em;
}

h3 {
  font-family: 'Aeonik-Regular' !important;
  font-weight: 400;
  font-style: none;
  font-size: 18px;
  letter-spacing: 0.00em;
  text-transform: none;
  line-height: 1.2em;
}

h4 {
  font-family: 'TomatoGrotesk-Regular' !important;
  font-weight: 400;
  font-style: none;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2em;
}

 

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

It appears to be working when I look at your website.

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

Clear your cache or try viewing on an incognito browser.

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

Thanks Ziggy, I've done both as suggested.

I can see it working fine in my browser in incognito window, but I've had two other people check on their laptops and it presents the same issue.

Just wondering/conscious of what will happen when the site is published as I obviously want the custom fonts to be showing. 

Any suggestions moving forwards?

Many thanks 👍

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.