Different font showing up on mobile (CTA)

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

Hello,

I am having a problem with the CTA buttons. Different fonts are showing on mobile version and screen version. When I look at in a mobile version mode on my computer the font looks great, but it is different when I actually look at my website on my own phone. I tried everything, really looked closely at my custom css but there is nothing. The font I want is commuters sans. Thank you for looking into it.

You mean Inquire button? font commuters sans?

Have you declared @font-face for commuters sans yet?

Did you test on iPhone?

Yes the one for inquire. I didn't declare it.. it's like that for all CTA buttons. The form button is OK. What code should I use to fix it? On my phone and my husband's it's not commuters sans. But when I look at it on my squarespace on my computer (mobile view) I see commuters sans (that's what I want)

6 minutes ago, Kotryna said:

Yes the one for inquire. I didn't declare it.. it's like that for all CTA buttons. The form button is OK. What code should I use to fix it? On my phone and my husband's it's not commuters sans. But when I look at it on my squarespace on my computer (mobile view) I see commuters sans (that's what I want)

communters sans is Squarespace default font or custom font? If custom font, you need to declare with @font-face, same as other custom fonts.

Thanks, I added it and I fixed it! It is a squarespace font, but I was using it on custom css. I guess that's why it didn't work until I assigned it. 

@tuanphan I'm having this issue with a non-squarespace font that I have uploaded to the custom css editor, and declared the @font-face for. Any idea what could be causing this?

It works as it should on desktop. I'm looking at the site on mobile - guidingbrands.com

This is the code I added to the custom css editor

@font-face {
font-family: NoirPro-Bold;
src: url(https://static1.squarespace.com/static/617749b1dca61a7f6f704c7e/t/620dd0936fd05d47bb096908/1645072531558/NoirPro-Regular.eot);
}

@font-face {
font-family: NoirPro-Regular;
src: url(https://static1.squarespace.com/static/617749b1dca61a7f6f704c7e/t/620dd0936fd05d47bb096908/1645072531558/NoirPro-Regular.eot);
}

h1,h2, h3 {font-family: NoirPro-Bold;}

/* p1 */
p.sqsrte-large {
    font-family: NoirPro-Regular;
}
/* p2 */
p {
    font-family: NoirPro-Regular;
}
/* p3 */
p.sqsrte-small {
    font-family: NoirPro-Regular;
}

1 hour ago, kvick said:

@tuanphan I'm having this issue with a non-squarespace font that I have uploaded to the custom css editor, and declared the @font-face for. Any idea what could be causing this?

It works as it should on desktop. I'm looking at the site on mobile - guidingbrands.com

This is the code I added to the custom css editor

@font-face {
font-family: NoirPro-Bold;
src: url(https://static1.squarespace.com/static/617749b1dca61a7f6f704c7e/t/620dd0936fd05d47bb096908/1645072531558/NoirPro-Regular.eot);
}

@font-face {
font-family: NoirPro-Regular;
src: url(https://static1.squarespace.com/static/617749b1dca61a7f6f704c7e/t/620dd0936fd05d47bb096908/1645072531558/NoirPro-Regular.eot);
}

h1,h2, h3 {font-family: NoirPro-Bold;}

/* p1 */
p.sqsrte-large {
    font-family: NoirPro-Regular;
}
/* p2 */
p {
    font-family: NoirPro-Regular;
}
/* p3 */
p.sqsrte-small {
    font-family: NoirPro-Regular;
}

2 font face code are the same, they conflict so h1, h2, h3 didn't work

With 2 font Regular & Bold, you need to declare 2 different font file.

Also, do you have any other format? eg ttf, woff, woff2,..?

EOT works on MS Edge only. See detail (scroll down to bottom): https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Thank you @tuanphan! Good catch on the duplication! I guess I was looking at this so much I missed it 🙂

And thanks for the MS Edge tip.

It works well now.

K