Custom Fonts on Mobile

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

Hi There, 

I'm trying to get my custom fonts to show up on mobile. I've read through these forums and added bits of pieces of everyone's code, but i'm having some trouble finding a solution! I've only designated the custom fonts for a few headers and paragraph fonts. Ideally, H1-H3 should be TAN-NIMBUS, all paragraphs + h4  should be Regards. 

h1 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */

  }

h2 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');/* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */

  }

h3 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */

  }
h4 {font-family: 'Regards';}

@font-face {

    font-family: 'Regards';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');

  }

p1 {font-family: 'Regards';}

Your code is invalid. Use this new code

@font-face {
    font-family: 'TAN-NIMBUS';
       src: url('https://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  }
h1, h2, h3 {font-family: 'TAN-NIMBUS';}

@font-face {
    font-family: 'Regards';
    src: url('https://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  }
h4, p.sqsrte-large {font-family: 'Regards';}