Changes In Theme.Css.Liquid and base CSS Not Reflecting On Mobile

Technical Q&A

Topic summary

Custom font not applying on mobile in a Shopify theme. The custom font “Loveloblack” displays correctly on desktop but fails on mobile.

What was done:

  • Font file uploaded to Assets (loveloblack.woff via cdn.shopify.com).
  • @font-face declared in theme Liquid (placed before media queries) with src pointing to the WOFF file and a format value written as " woff2).
  • Base CSS updated (after body text) with rules setting font-family: ‘Loveloblack’ !important and related typography properties.

Goal: Make the custom font load and render on mobile devices as well.

Notes:

  • Code snippets are central to the issue (@font-face declaration and base CSS rules).
  • No resolution or replies yet; assistance requested to diagnose why the font is not reflected on mobile.
Summarized with AI on January 17. AI used: gpt-5.
1

Hello,

I added a custom font. It worked on desftop version but not reflected on mobile.

I firstly added the font Loveloblack on ASSET

Then I added the following code in themes liquid (before media screen)

@font-face {
font-family: Loveloblack;
src: url(https://cdn.shopify.com/s/files/1/0445/3721/7182/files/loveloblack.woff?v=1671725840) format('woff2);

Then I added the following codes in base css (after text body)

{
font-family: ‘Loveloblack’ !important;
font-style: var(–font-heading-style);
font-weight: var(–font-heading-weight);
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;
}

Could you please help me to make it work on mobile as well?