Fonts not appearing on mobile the same as desktop

Technical Q&A
, , ,
1

Site wide, on desktop, all of my text takes the tight spacing and line height but the text on the mobile version uses the basic font without the modification (line height, spacing, and weight occasionally) that shows correctly on desktop.

2

That sounds more like a mobile override than a different font. First search your theme CSS for @media (max-width: ...) rules that touch font-family, letter-spacing, line-height, or font-weight; temporarily disable just those declarations and retest on a real phone. If the family itself changes, check whether the @font-face definition includes the weight used on mobile—browsers can fall back when that file or weight is missing.

Can you share the public URL, theme name, and the CSS block where you set the desktop typography? With those three pieces, the exact mobile selector can be isolated without changing site-wide typography.

3
4

Thanks — I checked the live site. Bayon and Inter both load successfully, and the active mobile rules at 749px and below do not replace the site-wide font family, letter spacing, or line height. For example, the scrolling “THE ONLY DRINK THAT MAKES WAVES” text resolves to Bayon at 24px, with 24px line height and -0.72px letter spacing.

That makes a global mobile font override less likely; the mismatch is probably tied to one specific text block/preset, or to stale CSS in the mobile browser. Could you name one exact line that looks wrong on your phone (for example, “10% To The Ocean”) and the phone/browser you are using? Please also check that same line once in a private/incognito tab. If it still differs there, that one element is enough to trace the exact selector without changing the typography site-wide.

5

Hey @FishPissHardSeltzer

Just to clarify, you’ll need to be a little more specific if you’re referring to a particular piece of text. I checked your website and inspected both the desktop and mobile versions, and they’re using the same font size and line height. Let me know if you’re noticing it somewhere specific.

Best,
Moeed

6

I checked your live site on a real phone width, and the mobile version is using the exact same typography as desktop. Same font (Bayon for headings, Inter for body), same tight letter-spacing and line-height.

Same SUMMER SALE! heading on desktop and on a 390px phone - identical Bayon font, spacing, and line height
Same SUMMER SALE! heading on desktop and on a 390px phone - identical Bayon font, spacing, and line height1174Ă—288 24.3 KB

Reasons:

Cached CSS on your phone (most common)

  • Your phone browser is holding the old CSS from before you changed the typography.
  • Open your site in a private/incognito tab on the phone and reload, or clear that browser’s cache.
  • If it looks correct in incognito, it was cache.

You are looking at the editor preview, not the live site

  • The theme editor’s mobile preview can render before the web fonts load, so text flashes the plain fallback font.

Weight

  • Your heading font Bayon ships only one weight (Regular). There is no bold file.
  • On desktop the browser fakes a bold when you ask for one. iOS and Safari often will not fake it, so those headings can look lighter on the phone.
  • For bold headings, switch the heading font to one that has a real bold weight (Inter does), or keep Bayon at its single weight.

Regards,
Ploqo