custom Adobe Font displaying on desktop but not on mobile

kosmox8 · ‎01-03-2024

Hello Guys!

I tried many things but I can't find the right solution, so I finally decided to ask. I am using REFRESH theme (version 12.0.0) and tried uploading the Custom Adobe Font (web embed code). The font I'm using is Bebas Neue Pro Expanded (Regular & ExtraBold).

I uploaded the font source-url to theme.liquid inside of the <head> code and the font css codes into base.css at the bottom of the file.

Like this:

1. <link rel="stylesheet" href="https://use.typekit.net/vri2nhf.css">

2. h3,h4,h5,h6,a{font-family: "bebas-neue-pro-expanded", sans-serif !important;
font-weight: 400;
font-style: normal;
}

h1, h2{font-family: "bebas-neue-pro-expanded", sans-serif !important;
font-weight: 700;
font-style: normal;
}

Now, the issue is that the font does not show up in the "Online Store" theme preview or mobile version. It works only on the desktop version when I go inside the shopify theme editor, or directly to the webpage (www.8lamps.com😞

I wonder if you guys know what I can do to solve this issue - waiting for responses, thanks!

custom Adobe Font displaying on desktop but not on mobile

custom Adobe Font displaying on desktop but not on mobile

Community Blog Articles