Custom Adobe Type font Megazoid not loading on mobile

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;
}

It doesn't work for me. Windows/Chrome

Do you still need help?

Thanks @iamdavehart! Looks like putting it in a footer code block worked.

Side note, I thought custom code injection was unlocked under the Personal subscription, but maybe not? It's misleading that I can access this screen and paste code into it, but am not getting any feedback to say it's disabled for me. (Maybe the "Upgrade [lock icon]" at the top is trying to tell me that, just very weakly? I can't stand poor experience design!)

On 3/1/2023 at 8:46 PM, jvanhout said:

I thought custom code injection was unlocked under the Personal subscription, but maybe not? Maybe the "Upgrade [lock icon]" at the top is trying to tell me that

Code Injection isn't available on Personal billing plans.

Regarding the lock icon, the blue 'Premium Feature' banners were not popular so, in response to feedback, they're trying the less obtrusive lock symbol with the 'UPGRADE' link 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️