Salty Feathers CSS Font Issue

Site URL: https://www.amberlethem.com/

I added the Salty Feathers font to my squarespace website and the font changed when viewing the site one squarespace (desktop and mobile views) But when viewing the site on my phone the font does not match the squarespace view. I've attached the squarespace views, my laptop view and my phone view. I'm using all apple products.

I only changed the CSS code to Salty feathers for headings2 (h2) this is the code I used. Any helpful ideas? The company I bought the font from has been very unhelpful. 

@font-face{ 
    font-family: 'SaltyFeathers.ttf';
    src: url('saltyfeathers.eot');
    src: url('saltyfeathers?#iefix') format('embedded-opentype'),
         url('saltyfeathers.woff') format('woff'),
         url('saltyfeathers.ttf') format('truetype'),
         url('saltyfeathers.svg#saltyfeathers') format('svg');
}
 h2, {
    font-family: "SaltyFeathers-Regular";
}

Any help would be amazing!!!!

Thank you! 

upload font to your site then enter font file url, NOT font file name

 src: url('saltyfeathers.eot');
    src: url('saltyfeathers?#iefix') format('embedded-opentype'),
         url('saltyfeathers.woff') format('woff'),
         url('saltyfeathers.ttf') format('truetype'),
         url('saltyfeathers.svg#saltyfeathers') format('svg');

HI Tuanphan, Thank you for your response! I tired the path you gave me and  it still didnt work. Any ideas?  I uploaded a ttf file for the font. See screenshots.

tried a modified version see below to apply to headings 2 (h2)

I'm thinking the URL doesn't look right?

Your url NOT invalid url.

the valid url similar this: https://domain.com/yourfontname.ttf

NOT yourfontname.ttf

After upload completed. Click Fonts name > Squarespace will paste font url to Custom Box. Copy and use!