Custom font not appearing in mobile or Safaria

Hi there! 

I have a custom font (Graphik) on our site which appears on desktop on Chrome, but we can't get it to appear on Safari, or on mobile (Chrome and Safari on phone) 

This is the code we are using to get the custom code.  Trying to target the main header on the home page, although it looks like all of the other font's aren't working as well. 

Any help would be appreciated! (Link to current site https://www.folio.nz/)

@font-face {
	font-family: Graphik;
	src: url(https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/5fff9640df80a433128efa3d/1610585664855/Graphik-Light-Web.woff);
}
h1, h2, h3, h4 {
	font-family: Graphik;
 	font-weight: 600;
}

13 minutes ago, TommyNZ said:

Hi there! 

I have a custom font (Graphik) on our site which appears on desktop on Chrome, but we can't get it to appear on Safari, or on mobile (Chrome and Safari on phone) 

This is the code we are using to get the custom code.  Trying to target the main header on the home page, although it looks like all of the other font's aren't working as well. 

Any help would be appreciated! (Link to current site https://www.folio.nz/)

@font-face {
	font-family: Graphik;
	src: url(https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/5fff9640df80a433128efa3d/1610585664855/Graphik-Light-Web.woff);
}
h1, h2, h3, h4 {
	font-family: Graphik;
 	font-weight: 600;
}

 

Check this

@Web_Solutions thanks for that link but it appears it still isn't working! I tried using the TTF and OTF file in case it was that but still no luck! 

This is my CSS I'm using and as far as I know it should be all set up correctly. I'm not sure if I'm missing something really obvious here! 

Any help is much appreciated 🙂
 

@font-face {
	font-family: 'Graphik';
	src: url('https://static1.squarespace.com/static/5ff8d2ac6bbc7c345298abfd/t/65a58c2774a79d3bfc9bd493/1705348136769/Graphik-Light-Web.otf');
}
h1, h2, h3, h4 {
	font-family: 'Graphik' !important;
}

[data-collection-type^="blog"] .item-pagination-title {
	font-family: 'Graphik';
}

a {
	font-family: 'Graphik';
}
p {
	font-family: 'Graphik';
}