Custom font issue on Mobile

Hello - I'm using some scrolling text on my clients site with a custom font, as I preview it on the mobile squarespace platform it looks good, but when I look at it on my actual phone the font looks nothing like mine. Is there a fix for this?

URL: bobmosesfund.org

PASS: Bmfmoses123

Thanks,

Javier

HOW IT SHOULD LOOK:

HOW IT ACTUALLY LOOKS ON MOBILE:

I am having this same issue on my site. its almost like the scrolling font is triple layered, if that makes sense. 

@sloanwae That's exactly it! I checked to see if I accidentally duplicated the section but I didn't.

@sloanwaeDid you get to keep the same font?

so for me the difference between my heading and paragraph is just the boldness, so no i lose the bold but i have the same font. its not the perfect solution but it does seem to fix the triple font situation. 

@sloanwaeit worked! with some additional css I was able to keep the same font too. Thanks!!

@xtrano88 can you share your css? We're having the same issue -- over here, and would prefer not to make our headings into paragraphs. 

@AIW unfortunately that was the only thing that worked. After you make them paragraph styles you can add this custom css to whatever font you want:

.Marquee * { font-family: serif!important}

Are you using a variable font? I ran into the same problem with a variable font (League Spartan), but then I added just the bold version (League Spartan Bold) as a new font and now it works great!

This is the old code, using the variable font, which gave me the triplicated look on mobile (iPhone):

h1, h2, h3, h4 {font-family: 'League Spartan'; font-weight: 700 !important; }

Now I'm using this code, using the bold font:

h1, h2, h3, h4 {font-family: 'League Spartan Bold' !important; }

Hope this helps!