Fonts rendered different on android and ios

singular-mc
Shopify Partner
2 0 1

Hello Community, 

I have encountered a blocker, I had my theme rendered on ios, android and chrome browser resize dock for mobile view. I am getting different fonts on different platforms.

On Android I am getting sans-serif as fonts in the footer -

android.jpeg

While on IOS and Desktop responsive dock, I am getting different font Albra,

ios.jpegScreenshot 2024-05-21 at 5.30.35 AM.png

 

I have already checked on incognito to avoid cookies, still the font sans-serif renders on android.

Please help me to fix this issue.

Can you please tell me where to edit fonts for h2, spans, anchors separately?

 

Replies 3 (3)

tim
Shopify Expert
3578 304 1332

You have rule like font-family: 'albra' !important

However, browser have no information where to get this font and you have no fall-back fonts listed, so browser uses default font to show this element. Default font may differ between browsers and OSes, so nothing unexpected here.

 

Now, in your assets/custom.css you have some code to define the Albra font-face, but it was not rendered as you've expected. You can see that liquid code is still there unprocessed:

Screenshot 2024-05-21 at 1.09.55 pm.png

You should rename this file to be custom.css.liquid for liquid code to be processed. This, however, is not recommended for a number of reasons, that's why modern themes render font-face rules as part of the layouts/theme.liquid

 

Also, your font file names are missing their extensions?

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
singular-mc
Shopify Partner
2 0 1

I tried changing file to custom.css.liquid in my clone QA theme. Nothing changes, I also moved all the font files to assets folder. It is not working yet. Please help.

tim
Shopify Expert
3578 304 1332

I can't see what you've done in theme copy unless you share a preview link.

 

Simply renaming the stylesheet file is just a first step -- remember "Also, your font file names are missing their extensions?"

You can have your files either in Assets or in Files -- it does not really matter, you just need to use proper filter -- either asset_url or file_url.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com