Span class not working on mobile

Hi, I am having issues with added span class and custom CSS for two H1 Headers on two of my pages.

1. This page: https://heronpondhideaway.com/things-to-do-in-the-adirondacks The fonts I am using are both custom, and uploaded locally on my site. The customization works fine on my PC, in my preview mode, in incognito mode and on all responsive screen sizes as far as I can test on my PC, but the custom fonts for the words “in the” are lost on my phone and revert to a basic font. All other css works as expected, not sure what’s causing this (or why they would look different). I assume you can see custom span and css class in dev mode?
2. This page: https://heronpondhideaway.com/book-direct-vacation-rental/ has just a simple span class to underline the words “book direct” and custom css to color and thicken the line. Again, works fine on all screens except on my phone, the orange line is moved down and over in a random spot.
3. I confirmed this isn’t a caching issue b/c the issue exists even when I check the site with a no cache script. Even still, I have purged all caching plugins, purged cache at the hosting level, cleared cache on browser and deleted data on my incognito modes and even tested in private browser on my phone. Both phone versions show the same. Having a difficult time testing if I can only see it on my phone and nowhere else.

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