Custom Font not loading on mobile (again)

Meant to add that the website is https://www.moonraker.ai

Hi there,

you have an error in your @font-face CSS - change the CSS to this:

@font-face {
    font-family: 'Sofia Pro';
    src: url('https://www.moonraker.ai/wp-content/uploads/2020/12/sofia_pro_regular.woff2') format('woff2'),
    url('https://www.moonraker.ai/wp-content/uploads/2020/12/sofia_pro_regular.woff') format('woff'),
    url('https://www.moonraker.ai/wp-content/uploads/2021/12/sofia_pro_regular.ttf') format('truetype'),
    url('https://www.moonraker.ai/wp-content/uploads/2021/12/sofia_pro_regular.otf') format('opentype');
}

Oh I thought we needed the source code for woff like woff2? My mistake! I'll let you know what happens.

Just the one src: - it supports an array of many URLs.
Make sure to clear any caches afterwards

Very strange thing going on that I recorded a short video about: https://cloud.moonraker.ai/BhbHQQS

Hi there,

Can you keep the @font-face and let us check? As it is now, the CSS generated by the customizer is for font-family: Sofia Pro; but there's no actual font file loading so it's falling back to system font - https://share.getcloudapp.com/5zu90KN1

Elvin, I just added the code back in. Take a look at the two pics below:

No code added: https://cloud.moonraker.ai/qBWKg8j

Code added: https://cloud.moonraker.ai/PcrfuFY

For some reason the font is changing shape when the code is added compared to not added. I prefer to have it appear as it does in the first pic and cannot seem to achieve this for some reason.

The first pic represents what Sofia Pro looks like if you were to go download it, as seen here: https://www.cufonfonts.com/font/sofia-pro. The original appearance is the reason why I chose this font in the first place. I'm unsure of why it is changing like this!

I still don't see it being loaded on https://www.moonraker.ai (it is on cloud.moonraker.ai though)

Can you try correcting this first?
https://share.getcloudapp.com/eDugNZww

It's what David spotted here - https://generatepress.com/forums/topic/custom-font-not-loading-on-mobile-again/#post-2046709

Once it's loaded properly, we can debug further.

Note: You can disregard that tool you're using to check. It only checks the CSS, not the actual font file that's loading. This means you can always have "Sofia Pro" and 400 weight on your CSS but if it doesn't have the font family(and variant) file then it will just fall back to what's available.

Thanks for the tip on the font plugin! Didn't realize that.

I have the code installed in additional CSS as instructed: https://cloud.moonraker.ai/W04qwaW

I think i found the problem...in my Code Snippets plugin there are a few lines of PHP here: https://cloud.moonraker.ai/7bv7mQM

I configured this 12 months ago and I imagine you have changed the theme a TON since then. Here is the code written out:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Sofia Pro';

return $fonts;
} );

You can remove the snippet.

That snippet isn't necessary as you can specify the font name on Appearance > Customize > Typography.

As for updating the @font-face.

I've checked https://www.moonraker.ai again and it still doesn't reflect the change you've done.

I'm not sure how your host's development environment works though but if your hosting's backend works like dev > test > live then you'll have commit/push the changes you've made on dev site to live site for it to work.

I don't know much about how SiteGround organizes things in the backend. The extent of my knowledge is to turn off the SG Optimizer caching plugin and WP-Optimize to ensure that nothing was being held in the background and clear my device cache every time I check for an update.

Is there more to do on the hosting side of things?

Check this one out:
https://www.siteground.com/tutorials/staging/deploy/

If cloud.moonraker.ai is where you did the change and it's the staging site, you'll have deploy it to the live site (www.moonraker.ai). :D

If you're quite unsure how to do it, you can ask for assistance and pointers w/ SiteGround's support. :D

Cloud.moonraker.ai is only used for the application jumpshare to take screenshots and videos, it has no content and all site updates are made on the main www subdomain.

I am not sure what the issue is.
I checked your site. I can see the correct @font-face CSS loaded. And i can see the Local Font request being made. And its all displaying correctly.