Mobile Font is different from Desktop version

I have been converting a site from Elementor to Gutenberg using the Kadence theme and Kadence blocks. During this time, I have noticed that the font on the mobile version of the site is a simple looking aerial whilst, on the desktop, the font is correctly showing as goodvibrations-script, which I downloaded from https://bigfontsite.com/. This is the curvy text showing.

This font issue is in relation to all the H1 and H2’s

I have tried to edit the font on the mobile side, but that naturally changes the desktop version too. I tried to play with some CSS to force the goodvibrations-script font through for all devices, but that didn’t work, so now I’m not too sure what to try. This is the ‘dodgy’ code that I used, but it didn’t work:

.goodvibrations-scrip {font-family: helvetica;} 

Upon inspection of the original font name, before I started playing with it, read something like this:

'goodvibrations-scrip'helvetica, arial, sans-serif;

This is a Woo Commerce store as well, and the featured products are not displaying correctly on the mobile home page either. But if I play with this on the mobile end, the desktop will be affected too.

I don’t know if these issues are there because I’ve converted page builders and themes or if it’s something else. The site was originally built using Astra and Elementor Pro. I have since converted it to Gutenberg using Kadence.

Any advice or tips would be awesome.

Thank you in advance!

Kate

The page I need help with: [log in to see the link]