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?
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?
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.
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.
