Custom Fonts not working on mobile site

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

I have added a custom css to my site to change the font, however it is not applying to my mobile version of my site, which is what I use most. I've tried to keep it simple as I'm new to this but still doesn't seem to be working. Any help would be apricated! 

My code - 

@font-face {

    font-family: 'ALBRA';

       src: url('https://static1.squarespace.com/static/615f060bc9258a6b95ce9b9e/t/62bd99c524ed2a63f31518fd/1656592837958/ALBRA.ttf');

  }

p {font-family: 'ALBRA';}
H1 {font-family: 'ALBRA';}
H2 {font-family: 'ALBRA';}
H3 {font-family: 'ALBRA';}
H4 {font-family: 'ALBRA';}

Hi. Do you have any other font formats?