Font looks different on my actual mobile

Hi - my custom installed font (Jacqueline) HERE is showing up completely different (font size/shape and the layout) to what it looks like when editing on the web. 
Here's some code I have in CSS for formatting etc.
 

Attached are images for reference

//making P1 smaller in mobile//
// Mobile Text Sizes - Ghost //

@heading-1: 30px;
@heading-2: 25px;
@heading-3: 25px;
@heading-4: 65px;

@paragraph-1: 14px;
@paragraph-2: 14px;
@paragraph-3: 10px;

/* --- Do Not Edit Below ---- */

@media only screen and (max-width: 640px) { h1 { font-size: @heading-1 !important; } } @media only screen and (max-width: 640px) { h2 { font-size: @heading-2 !important; } } @media only screen and (max-width: 640px) { h3 { font-size: @heading-3 !important; } } @media only screen and (max-width: 640px) { h4 { font-size: @heading-4 !important; } } @media only screen and (max-width: 640px) { .sqsrte-large { font-size: @paragraph-1 !important; } } @media only screen and (max-width: 640px) { p { font-size: @paragraph-2 !important; } } @media only screen and (max-width: 640px) { .sqsrte-small { font-size: @paragraph-3 !important; } }

// Mobile Text Sizes - Ghost //



// Adding Jaceline //
@font-face {
font-family: 'Jaceline';
src: url('https://static1.squarespace.com/static/637644493af6b10d5297de1c/t/63764777aaf47f3e73f9d0d8/1668695927776/Jaceline.ttf');
}

// Jaceline for headers //
h4 {
  font-family: 'Jaceline';
  font-weight: 600;
  font-style: ;
  font-size: 120px;
  letter-spacing: 0.04em;
  line-height: .7em;
					}

What is site url?

I think I solved it. Thank you for your help.