Custom font not showing on mobile

I have a custom font for all headings but it is not showing up on mobile. When I'm on the desktop editing my mobile site it is there but when I go on the Squarespace app or view the website online on a mobile it is subbing in another font (second screenshot).

This is the code I used to put my custom font in. Should I change it somehow?
 

@font-face {

    font-family: 'Common';

       src: url('https://static1.squarespace.com/static/64aa41417398e76d5c249b09/t/64aa9028aa15cd74895a821b/1688899624415/Common.otf');

  }
h1, h2, h3, h4 {font-family: 'Common';}

Can you share the website URL and add a site wide password so I can test what's going on?

19 hours ago, Ziggy said:

Can you share the website URL and add a site wide password so I can test what's going on?

@Ziggy emmahearnes.com 
Password: emmah

I think the font is actually rendering as Monserrat. When I put the font file referenced into my browser it tells me the the hosting site has been deleted. Do you have the font file you can re-upload? That would probably fix this.

https://static1.squarespace.com/static/64aa41417398e76d5c249b09/t/64aa9028aa15cd74895a821b/1688899624415/Common.otf

You may well not have finished, but just in case this is helpful I wanted to share the view of the homepage I currently see: