Custom fonts not appearing on mobile or tablet devices

Hi There,

I have been using a custom font 'ArticulatCF' on my website and it appears good on desktop but for some reason it's defaulting on mobile and tablet. I am new to CSS code so please be kind as I am running blind here. Is someone able to help me fix this for me? 

https://www.rhodesdesign.co.nz/

Some help would be greatly appreciated. The CSS I have is this: 

/*
===================================
FONT STYLING
===================================
*/

:root {
  --font-demi-bold: 'ArticulatCF-DemiBold';
  --font-normal: 'ArticulatCF-Normal';
  --font-light: 'ArticulatCF-Light';
  --font-thin: 'ArticulatCF-Thin';
}

@font-face {
  font-family: var(--font-demi-bold);
  src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455a8a93021717621af53f4/1683335337449/ArticulatCF-DemiBold.otf");
}

@font-face {
  font-family: var(--font-normal);
  src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab8006e98554f2b59b1f/1683336064636/ArticulatCF-Normal.otf");
}

@font-face {
  font-family: var(--font-light);
  src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455aa05349d4f67433d4212/1683335685767/ArticulatCF-Thin.otf");
}

@font-face {
  font-family: var(--font-thin);
  src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab3f4e96fe4154e3fcf8/1683335999541/ArticulatCF-Light.otf")
}

/*
===================================
END FONT STYLING
===================================
*/

/*
===================================
set all the fonts
===================================
*/
h1, h2, h3, h4, h3.portfolio-title {
  font-family: var(--font-demi-bold) !important;
}

.sqsrte-large, p {
  font-family: var(--font-thin) !important;
}

.sqsrte-small {
  font-family: var(--font-thin) !important;
}

.header-nav-item a,
.header-actions-action .btn,
.sqs-block-button-element--small, 
.sqs-button-element--tertiary,
.sqs-block-button-element--medium,
.sqs-button-element--primary,
.sqs-block-button-element--large,
.sqs-button-element--secondary {
  font-family: var(--font-normal) !important;

}
/*
===================================
End set all the fonts
===================================
*/

Hi,

Do not use variant in @font-face code 

change :root & font face code to this

:root {
    --font-demi-bold: 'ArticulatCF-DemiBold';
    --font-normal: 'ArticulatCF-Normal';
    --font-light: 'ArticulatCF-Light';
    --font-thin: 'ArticulatCF-Thin';
}

@font-face {
    font-family:  'ArticulatCF-DemiBold';
    src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455a8a93021717621af53f4/1683335337449/ArticulatCF-DemiBold.otf")
}

@font-face {
    font-family: 'ArticulatCF-Normal';
    src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab8006e98554f2b59b1f/1683336064636/ArticulatCF-Normal.otf")
}

@font-face {
    font-family: 'ArticulatCF-Light';
    src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455aa05349d4f67433d4212/1683335685767/ArticulatCF-Thin.otf")
}

@font-face {
    font-family: 'ArticulatCF-Thin';
    src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab3f4e96fe4154e3fcf8/1683335999541/ArticulatCF-Light.otf")
}