Jump to content

Custom Adobe Type font Megazoid not loading on mobile

Go to solution Solved by iamdavehart,

Recommended Posts

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

 

Screenshot 2023-02-15 at 1.12.09 PM.png

IMG_3797.PNG

Link to comment
  • Solution

Hi @jvanhout

Your typekit link isn't being inserted to your page (I've checked the source). the rest of the code is all fine (I've tested by inserting the typekit link manually to your site). it probably works locally for you because you've got that font installed on your local machine... 

check the code that's inserting the link tag. that should be in your header injection (Advanced > Code Injection). like I said, I tried it on your site and it worked, so you've obviously not got the link tag injection working. Code injection is premium feature so perhaps its not supported for you? if that's the case, just add a code block into your footer and put the link tag in there. 

<link rel="stylesheet" href="https://use.typekit.net/zow1ant.css">

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 weeks later...

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!)

Screenshot 2023-03-01 at 3.40.56 PM.png

Link to comment
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 🙂

image.thumb.png.a7e492c131be02b80b1bebb0ffbe0c08.png

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

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.