Fonts rendered different on android and ios

[singular-mc]

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 -

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

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?

[tim]

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:

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?

[singular-mc]

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]

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.