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
===================================
*/