Custom Upload Font works in Chrome but not in Safari

Hi Everyone:)

I'm struggling to get a certain custom font to show up in safari, it works perfectly in chrome but for some reason doesn't show up in safari, I don't suppose anyone has any ideas at all? I have uploaded various font formats but no joy:)

my website link is

https://turquoise-dragonfly-d82m.squarespace.com

Password - hartridges

The font in question is the h2 headers - Akrobat-Black (shown not working on the screenshot attached)

The code I have used to try to get this to work is

// CUSTOM FONTS

@font-face {

font-family: 'akrobat-black';
  
  src: url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd6d15ea08067a830f7f/1705696622007/Akrobat-Black.ttf),
       url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd685356a53afcae1cc0/1705696616605/Akrobat-Black.otf),
       url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd7975ded36bbb021102/1705696634015/Akrobat-Black.woff),
       url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd79d6807d2f11c8fd66/1705696634028/Akrobat-Black.woff2),

  url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd79e8c4c907ed4e3223/1705696634009/Akrobat-Black.eot);

}

h2 {

font-family: 'akrobat-black'!important;
font-size:30px;
text-transform:uppercase;
line-height:35px;

}
 

Many thanks in advance

Will

Safari often causes problems, but that might not be the issue here. You do have a problem with the addition of the font, it seems to have a couple of media queries with a gap so the custom font doesn't apply on screen sizes between 767px and 1024px.

Thanks so much for the reply

it doesn't seem to show the font even if i change browser window size to outside of those dimensions should the font not work if it was sized to a phone size for example?

Thanks in advance:)

Can you try with just one source file:

@font-face {
  font-family: 'Akrobat-Black';
  src: url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd79d6807d2f11c8fd66/1705696634028/Akrobat-Black.woff2) format('woff2');
}


h2 {
  font-family: 'Akrobat-Black' !important;
  text-transform:uppercase;
}

Thanks Ziggy, 

i added that in to replace the multiple versions, the fonts that were going wrong did change but still not to the correct font unfortunately

i noticed that there was an extra @fontface at the start when i delete this the incorrect font seems to default to arial (which is the font specified in the site styles section) not sure sure if that helps at all?

@font-face {

// CUSTOM FONTS

@font-face {
  font-family: 'Akrobat-Black';
  src: url(https://static1.squarespace.com/static/65534bd6e534764e6fc121e0/t/65aadd79d6807d2f11c8fd66/1705696634028/Akrobat-Black.woff2) format('woff2');
}

h2 {
  font-family: 'Akrobat-Black' !important;
  text-transform:uppercase;
}

34 minutes ago, will2 said:

i added that in to replace the multiple versions, the fonts that were going wrong did change but still not to the correct font unfortunately

There may be something wrong with the font file, where did you get it?

32 minutes ago, will2 said:

i noticed that there was an extra @fontface at the start when i delete this the incorrect font seems to default to arial (which is the font specified in the site styles section) not sure sure if that helps at all?

Errors in CSS could also be causing a problem, do you have anything else in Custom CSS?

i removed that and the @fontface at the start and the closing bracket and it now seems to work:) thanks for taking th etime to lookm into it for me very much appreciated:)

1 hour ago, will2 said:

i removed that and the @fontface at the start and the closing bracket and it now seems to work:) thanks for taking th etime to lookm into it for me very much appreciated:)

Excellent, glad that's now working for you!