custom Adobe Font displaying on desktop but not on mobile

kosmox8
Visitor
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="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😞

 

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)