Custom Font Not Loading for Mobile Site

Site URL: https://www.returnermagazine.com/

Hi, my custom font isn't showing up in the mobile version of my website. I would like for it to apply on any phone iPhone/Android, etc. Can anyone help? Thank you so much in advance!

Here's the custom CSS I'm using right now:

@font-face { font-family: 'CatchyMager';
src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf');
font-weight: normal;
font-style: normal; }

.has-site-title .Header-branding { font-family: "CatchyMager"; }

I see you changed Site Title to Logo Image. Do you still need help?

Yes, I temporarily changed it to avoid the weird look on mobile. I have now changed it back with the code. Can you still help? Thank you so much in advance.

On 8/17/2022 at 9:21 AM, edarcia said:

Yes, I temporarily changed it to avoid the weird look on mobile. I have now changed it back with the code. Can you still help? Thank you so much in advance.

Did you solve? It looks fine on my end

No, I didn't. Not in the mobile version. This is the look from my iPhone browser.

The above has not been resolved. Is there any one who can help me with the custom font in the mobile version of the site? Thank you!

Do you have any other font formats, eg: otf, woff, woff2?

Yes, I have uploaded the files for the font in .ttf, .eot, .woff, and .woff2. Is there a code I need to use to make these appear on the mobile version of my site? 

On 8/22/2022 at 10:58 PM, edarcia said:

Yes, I have uploaded the files for the font in .ttf, .eot, .woff, and .woff2. Is there a code I need to use to make these appear on the mobile version of my site? 

try use this code

@font-face { 
font-family: 'CatchyMager';
src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf');
src: url(otf url), url(woff url), url(woff2 url), url(eot url);
}

Replace with your otf, woff, woff2 url

8 hours ago, tuanphan said:

try use this code

@font-face { 
font-family: 'CatchyMager';
src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf');
src: url(otf url), url(woff url), url(woff2 url), url(eot url);
}

Replace with your otf, woff, woff2 url

It's still not working in mobile. Unsure what to do. I appreciate your help! Here's the code I have:

 

@font-face { 
font-family: 'CatchyMager';
src: url('https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f924cdd583b67a0a6d077e/1660495054237/CatchyMager-Normal.ttf');
src: url(https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/63065c93eb508c21f4533c38/1661361301931/CatchyMager-Normal.otf), url(https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f93771d583b67a0a6f0f42/1660499826251/CatchyMager-Normal.woff), url(https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/62f9377ad583b67a0a6f1535/1660499834477/CatchyMager-Normal.woff2), url(https://static1.squarespace.com/static/62e2f3be41c8034375426c0b/t/63065d833fc7a9421c708a50/1661361539953/CatchyMager-Normal.eot);
}

.has-site-title .Header-branding { font-family: "CatchyMager"; }

Just found mobile title has a different class name..Try this code

a.Mobile-bar-branding {
    font-family: "CatchyMager" !important;
}

THANK YOU SO MUCH!!!