One Custom Font is Not Loading on Mobile or Other Desktops

Site URL: http://www.oasisofharmonywellness.com

Hello,

I uploaded two custom fonts for my website and one of them is working fine on all platforms but the other one is not working on my mobile device or my other computer when I look at the website. In the mobile editor and in the desktop editor it all comes across looking perfectly fine. I don't know what I am doing wrong as I used the same codes for both fonts and one of them works fine. My website is www.oasisofharmonywellness.com. The Arial/Times New Roman looking font is the incorrect one. 

The coding I am using is below and the image is a screen shot of what I want it to look like and what I am seeing is on my mobile and desktop editors.

//ADDING AGENTLETOUCH FONT//
@font-face {
  font-family: 'AGentleTouch';
  src:  url('https://static1.squarespace.com/static/61bb5d6419570a43c54ffe7b/t/61bb9d842274492adc745504/1639685508567/AGentleTouch-Xye2.ttf');
}

//ASSIGN AGENTLETOUCH FONT//
h1 {font-family:agentletouch;}

//ADDING MONTSERRAT FONT//
@font-face {
  font-family: 'Monserrat';
  src: 
    url ('https://static1.squarespace.com/static/61bb5d6419570a43c54ffe7b/t/61bb9db0234a973b71c73e9a/1639685552250/Montserrat-Hairline_0+%281%29.otf');
}

//ASSIGN MONTSERRAT FONT//
h2 {font-family:Montserrat;}

//ASSIGN MONTSERRAT FONT SMALL//
h3 {font-family:Montserrat;}

//ASSIGN AGENTLETOUCH FONT SMALL//
h4 {font-family:AGentleTouch;}

//ASSIGN MONTSERRAT FONT PARAGRAPH//
p {font-family:Montserrat;}

//ASSIGN AGENTLETOUCH FONT BUTTON//
.header-nav-item {
  font-family: 'AGentleTouch';
}

I am not overly proficient in custom coding so any help would be most appreciated. Thank you.

Can you send 2 screenshots on desktop - mobile? We can help easier