Custom fonts in Kadence not displaying on mobile devices

[allpzz]

allpzz

February 2, 2021 at 7:06 am

Hi, I’m setting up a website for a client on Kadence PRO based on Saas template and I’m stuck in a weird situation. I wonder if someone else stumbled upon this.

I uploaded and set up a custom H1 font in woff2 format via the add-on plugin. The font works perfectly fine when editing and displaying in chrome browser but it does not display on a physical mobile device (tested on iPhone and Android phone in three different browsers). The font is displayed in the header response, I’ve played with load display swap on/off within plugin, preloading from WP Rocket and Perfmatters plugin but without success. However, I always get a warning from Chrome console that says The resource *Login to see link was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally. I get the same warning for Kadence header, body and footer CSS files.

I don’t think this is a caching issue (I use Cloudflare also and always clear all possible caches, from server to browser) but has to do something with preloading order of the woff2 and CSS.

Please see enclosed images. All suggestions on how to resolve this are appreciated. Thank you. Cheers