Custom CSS Fonts not visible in mobile view

xerse

I would like to use a specific google font only in slideshow header, avoiding to change any h1 fields in the whole template.

For this reason I can't use the function embedded in the style editor.
I applied a custom CSS on:
.acm-hero.style-1 .has-bg .hero-content h1 (if slideshow use a single image)
.owl-carousel h1 (if slideshow use multiple images)

Please take a look at "CUSTOM_PurityIV_business" style and "Home 1" menu item

The new font is corretly display on desktop but not on mobile.

Thanks

saguaros

xerse Hi

As I can see it's inheriting this css rule:

.acm-hero.style-1 .has-bg .hero-content h1 {
    font-family: "Amatic SC";
    font-weight: bold;
    font-size: calc(2.375rem + 1.5vw);
    /* font-size: 4.125rem; */
    color: #FFF;
    text-shadow: -1px -1px 0 #000, 
                      0px -1px 0 #000,
                      1px -1px 0 #000,
                      1px  0px 0 #000,
                      1px  1px 0 #000,
                      0px  1px 0 #000,
                     -1px  1px 0 #000,
                     -1px  0px 0 #000;
}

Is that ok now?

xerse

saguaros No, on mobile fonts family is not what I configured. I expect to see Amatic SC but on mobile i see the default font type

saguaros

xerse Maybe cache on the browser of your device? as it looks the same at my end.

xerse

saguaros I just made a test on another mobile phone. I see the default font, not the amatic SC.

The template style view, looks correctly on every format, Can you please let me know what is your mobile and browser? can you please make a screenshot? (I use android and chrome)

saguaros

Here is how it looks in my iPhone + Safari / Chrome browser:

(the same with Chrome)