I've built a website for a client : emeraldviewpomskies.com
Neither the custom heading font or the body text font matches on the mobile version. Pasting the full CSS code I'm using below, it has some other stuff in it incase some of it is interfering with the font formatting. On desktop it works fine:
// CUSTOM FONT
@font-face {
font-family: 'Supravitally'!important;
src: url(https://static1.squarespace.com/static/66d4940e3f045a7a1e78be50/t/66d9901bed09bd5399a0b6e5/1725534235891/supravitally.regular.ttf);
}
@font-face {
font-family: 'Albert Sans'!important;
src: url(https://static1.squarespace.com/static/66d4940e3f045a7a1e78be50/t/66e1ac1b888bc404eb3a3dcb/1726065691394/AlbertSans-ExtraLight.ttf);
}
h1 {
font-family: 'Supravitally'!important;}
h2 {
font-family: 'Supravitally'!important;}
h3 {
font-family: 'Supravitally'!important;}
h4 {
font-family: 'Supravitally'!important;}
.sqsrte-large {
font-family: 'Albert Sans'!important;}
p {
font-family: 'Albert Sans'!important;}
.sqsrte-small {
font-family: 'Albert Sans'!important;}
#siteWrapper.site-wrapper .sqs-button-element--primary,
#siteWrapper.site-wrapper .sqs-button-element--secondary,
#siteWrapper.site-wrapper .sqs-button-element--tertiary{
font-family: Albert Sans !important;
}
//change case of list sections//
.user-items-list-carousel .list-item-content__title {
text-transform: none !important;
font-family: "Supravitally"!important;
}
.user-items-list-carousel .list-item-content__description {
text-transform: uppercase !important;
}
.vertical-line {
background: #E1E5E5;
width: 1px;
height: 125px;
margin: 0 auto;
}
//button-hover effect //
.sqs-button-element--primary {
border: 1px solid #d5eafb !important;
color: #d5eafb !important; /* Text color before hover */
overflow: hidden !important;
position: relative !important;
background: transparent !important;
transition: background 800ms cubic-bezier(0.19, 1, 0.22, 1),
color 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.sqs-button-element--primary span {
z-index: 20 !important;
}
.sqs-button-element--primary:after {
background: #d5eafb !important;
content: "" !important;
height: 155px !important;
left: -75px !important;
opacity: 0 !important; /* Start with opacity 0 */
position: absolute !important;
top: -50px !important;
transform: rotate(35deg) !important;
transition: left 800ms cubic-bezier(0.19, 1, 0.22, 1),
opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) !important;
width: 50px !important;
z-index: -10 !important;
}
.sqs-button-element--primary:hover {
background: #B8CEC1 !important; /* Background color on hover */
color: #3e564d !important; /* Text color during hover */
opacity: 1 !important; /* Ensure full opacity on hover */
}
.sqs-button-element--primary:hover:after {
left: 120% !important;
opacity: 1 !important; /* Ensure full opacity on hover */
}
.sqs-button-element--primary:active {
background: #B8CEC1 !important; /* Background color on active */
color: #3e564d !important; /* Text color when active */
opacity: 1 !important; /* Ensure full opacity for :after on active */
}
.sqs-button-element--primary:active:after {
opacity: 1 !important; /* Ensure full opacity for :after on active */
}
html {
scroll-behavior: smooth;
}
/* Accordion Hyperlink Underlines */
div.accordion-block a {
border-bottom: 1px solid;
color: #d5eafb !important;
}
