Troubles changing the default Special Heading font on my homepage

My website is using the Roboto font. I have selected it in Theme Options\General Styling\Fonts:

I want to use another font, “Josefin Sans” on the main special heading only of my homepage.
Please note: they are both Google Webkit fonts.

This below is the CSS I used. I followed the instructions I found in the documentation.. You can find this CSS section at the end of my style.css file.

#top .titolo_homepage h1.av-special-heading-tag {
    font-family: 'Josefin Sans', sans-serif !important;
    letter-spacing: -2px;
}

#top .titolo_homepage .av-subheading p {
    font-family: 'Josefin Sans', sans-serif !important;
    letter-spacing: -2px;
    margin-top: -10px !important;
}

Please note: in “Performance,” I disabled CCS compression. I always clear the cache every time I test it, I am always using Incognito mode for my tests.

ON DESKTOP:
1) on desktop, when I open the page for the first time and haven’t yet accepted cookies, I see a normal sans serif font.

After accepting cookies, if I refresh the page, I will finally see the font I chose, Josefin Sans (it is especially recognizable by its very large N).

I should see it also before the cookies. In fact, if I select Josefin Sans in General Styling/Fonts/Headings, I see Josefin Sans also before cookies…

ON MOBILE:
1) Whatever browser I use (Chrome, Safari, Brave, Edge), I still see the default sans serif font, not Josefin sans. Both before and after cookies, both in normal mode and incognito mode.

2) please note: on PC, If I activate the Chrome developer’s mode and switch to “mobile,” I do see Josefin Sans!

So weird…

• This topic was modified 11 hours, 48 minutes ago by mistermagoo8691.
• This topic was modified 11 hours, 44 minutes ago by mistermagoo8691.