Custom Fonts not displaying on other devices

Hi all,

Seen this question asked multiple times but i still can't get it right. Currently building a trial site, and when my client logs in to see the site, they cant see any of the custom fonts. They display fine on my machine. Here is my code:

@font-face {
  font-family: 'FKDisplay-Regular' !important;
  src: url('https://static1.squarespace.com/static/660181900c172a57061a9d16/t/6601895fe3b21d6432b45af0/1711376735683/FKDisplay-Regular.ttf');
}
h1 {font-family: 'FKDisplay-Regular' !important;}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://static1.squarespace.com/static/660181900c172a57061a9d16/t/6605ee116d99074074b7ba15/1711664657817/FKGroteskNeue-Medium.ttf');
}
h2 {font-family: 'FKGroteskNeue-Medium';}
p, .sqsrte-large, .sqsrte-small {font-family: 'FKGroteskNeue-Regular';}

I am not a developer and don't know any code, this is all just pulled from the online resources!

Appreciate any help.

Cheers.

Do not use !important inside @font-face code