My custom Adobe Font, Megazoid, works perfectly on desktop and mobile preview, but when I open my site on my phone it uses the fallback (tested in Chrome and Safari on iOS 16.3.1)
I am using the header injection directly from Adobe Type:
<link rel="stylesheet" href="https://use.typekit.net/zow1ant.css">
And custom CSS for H1-H4 (I just added the !important although it doesnt seem to make a difference):
h1{
font-family: megazoid, sans-serif !important;
font-weight: 400;
font-style: normal;
}
h2{
font-family: megazoid, sans-serif !important;
font-weight: 400;
font-style: normal;
}
h3{
font-family: megazoid, sans-serif !important;
font-weight: 400;
font-style: normal;
}
h4{
font-family: megazoid, sans-serif !important;
font-weight: 400;
font-style: normal;
margin-bottom: -0.1em;
}