Custom font not appearing properly

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

sorry url is: https://panda-brass-5h3b.squarespace.com/

Can you share what you've done so far?

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;

}

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;
}

 

Thanks Ziggy, I replaced the code but unfortunately the same thing is happening. Any ideas? 🤔

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

Hmm that's weird. I've just tested on two separate devices and it's doing the same. What do you reckon?

Clear your cache or try viewing on an incognito browser.

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 👍