Mobile Issues for Custom Fonts: Long Running Issue

Store Design
1

I almost just want to give up, but one more shot. I’ve tried every solution I could find in the Shopify community, stackoverflow and Reddit and nothing has worked.

  • I have a custom CSS file and I refer to it in my theme.liquid file.
  • To be on the safe side I included ever font type not just woff2: eot, otf, svg, ttf, woff, woff2
    • E.g. @font-face {
      font-family: ‘EarthMass’;
      src: url(‘{{ ‘EarthMass.eot?’ | asset_url }}’);
      src: url(‘{{ ‘EarthMass.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’),
      url(‘{{ ‘EarthMass.otf’ | asset_url }}’) format(‘opentype’),
      url(‘{{ ‘EarthMass.woff’ | asset_url }}’) format(‘woff’),
      url(‘{{ ‘EarthMass.woff2’ | asset_url }}’) format(‘woff2’),
      url(‘{{ ‘EarthMass.ttf’ | asset_url }}’) format(‘truetype’),
      url(‘{{ ‘EarthMass.svg#EarthMass’ | asset_url }}’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: antialiased;
      }
  • I preloaded every font in theme.liquid
  • Added Helvetica as a backup font - doesn’t look like that’s working on mobile either.
    • font-family: ‘EarthMass’, ‘Helvetica Neue’, Helvectica, sans-serif !important;
  • I’ve cleared caches multiple times.
  • Changed the name of the CSS file and updated in theme.liquid to force an update
    • five9e-custom.css > five9e-custom-v2.css
  • Tried other phones and browsers and incognito mode
  • Verified the files are referenced correctly - works on desktop
  • Did a 24hour wait after changes
  • Adding fonts to Theme Settings > Custom CSS

It works on desktop and in Mobile view via Shopify Admin and none of these have worked. This shouldn’t be so hard should it? Custom fonts are a common thing in branding. What gives?? Can someone help me out here?

Five9E.com

Password: 1of3to3

2

try uploading them from admin dashboard > content > file > upload fonts
now copy the link and add this in your theme.liquid head
3

Files were already uploaded to dashboard > content > file. Initially I uploaded woff2 only, but that’s where all files are located. I added the above code snippet right before . Still nothing.

I moved it to the beginning of head. Nothing.

I still have these lines after base.css to connect to my five9e-custom.css if it matters.

{{ ‘five9e-custom.css’ | asset_url | stylesheet_tag }}

Any other ideas?
4

Hi @Five9E ,

I checked and it shows the same for both desktop and mobile, did you solve it?

You can also refer to the following instructions.

1 Like
5

can you share your theme.liquid file? or me the file