[Support request] Custom Font not loading on mobile (again)

Home Forums Support [Support request] Custom Font not loading on mobile (again)

Home Forums Support Custom Font not loading on mobile (again)

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #2046146
    Chris

    Hello! I just asked this question earlier today to get a font set up properly on mobile and when it was configured right it somehow made the previous custom font look different. It’s hard to describe, but for some reason I believe the WOFF2 and WOFF versions of my custom font Sofia Pro were slightly different. It turns out I loved the way it looked after you helped me fix it the first time and ended up sticking with Sofia instead of switching over to Proxima Nova after all!

    The problem is that when I got rid of Proxima Nova, for some reason Sofia is not showing up properly on mobile again. It was working for awhile, albeit with a pretty long FOUT, but now it’s not showing at all and the system font is pretty awful.

    I checked all through the support forum and my code seems to look good and I am using WOFF2, WOFF, TTF and OTF just in case and it’s still not loading. I have tried turning off my caching plugin and many other things as well so I’m not really sure what’s going on.

    Thanks in advance for your support!

    #2046148
    Chris

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

    #2046701
    David
    Staff
    Customer Support

    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');
    }
    #2046706
    Chris

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

    #2046709
    David
    Staff
    Customer Support

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

    #2046758
    Chris

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

    #2046944
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #2046950
    Chris

    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!

    #2047003
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2047018
    Chris

    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;
    } );

    #2047029
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2047032
    Chris

    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?

    #2047155
    Elvin
    Staff
    Customer Support

    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). ๐Ÿ˜€

    If you’re quite unsure how to do it, you can ask for assistance and pointers w/ SiteGround’s support. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2047403
    Chris

    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.

    #2047936
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.