Font inside a not loading on mobile

  • website: bm-ww.com
    password to view the page: elevate1

    I am using the Kadence theme.
    I’ve customized the team to load H1, H2, & H3 as a google font (Tourney, 700italic)
    and of course the theme supports google fonts so it all works fine.
    The rest of the fonts is JetBrainsMono, aka different to the headings.

    Now on my home page I am editing a paragraph as a html block (I’m adding a lot of css, including animations, to the home page and I just found it easier to work with positioning when editing all of the content as HTML).

    Inside the paragraph I have a <span class=”inlinefont”> tag wrapped around two words cause I want to change the font on just those two words to Tourney to make them stand out.

    And then in Custom CSS of course I went ahead and changed the font on the class: inline font.

    It loads fine on desktop, but when I load the webpage on my iPhone, the font inside the span instead shows up as Times New Roman.

    I can’t figure out why I’m only having this issue here, as all of my headers are loading the tourney font fine.

    Anyone who’s a bit more experienced with this stuff able to point me in the right direction??

Viewing 5 replies - 1 through 5 (of 5 total)

  • It loads fine on desktop, but when I load the webpage on my iPhone, the font inside the span instead shows up as Times New Roman.

    Did you try in an Android device? It might be a very browser/OS specific issue.

    Abdoljabbar

    (@jabbarbakhshande)

    hello
    Try Chrome or Firefox remote debugging to figure out what is causing the problem

    firefox: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging

    chrome: https://developer.chrome.com/docs/devtools/remote-debugging/

    Thread Starter stxphxnie

    (@stxphxnie)

    @a2hostingrj
    Thanks, I tested it on android and the font loads.

    Do you have any idea why it might not work on iPhone? Because the same font loads fine when it’s set through my theme customizer… do you think that the them could have done something in the code which optimizes the fonts across all platforms? And that doesn’t come through when I try to set the font myself.

    Abdoljabbar

    (@jabbarbakhshande)

    Let’s step by step identify what is causing the problem exactly, rather than guessing.
    – First check fonts are loaded
    – Check that your CSS custom fonts are loaded
    – and lastly you do not have any other style that overwrites yours

    Remote debugging is also possible for iPhones`

    • This reply was modified 3 years, 6 months ago by Abdoljabbar.

    Do you have any idea why it might not work on iPhone? Because the same font loads fine when it’s set through my theme customizer

    It really depends of the web browser that you use in iOS

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Font inside a not loading on mobile’ is closed to new replies.