Custom Fonts Not Showing

Hello,

I've added a custom font to my website, and added the "!important;" next to it, and it is still not showing. Below is the code. 
It is only appearing on Google chrome on the mac where the font is installed on the mac. Safari doesn't load it. Additionally, on other PCs and mobile it does not load. Can someone please support in this? It is for an important event going live soon.

@font-face {
font-family: 'SOLAR-VESTA-SERIF' !important;
src:
url('https://static1.squarespace.com/static/64ece908fafe492e179654a2/t/64ecf24b4f8a56530239f13f/1693333035052/SOLAR+VESTA+SERIF.TTF');
}

h1 {
font-family: 'SOLAR VESTA SERIF' !important;
}

Thank you @tuanphan! This fixed the issue. Much Apprecited.