custom Adobe Font displaying on desktop but not on mobile

1 0 0

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="">

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 (😞


Font issue1.pngFont issue2.png



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

Replies 0 (0)