Remove Visible Font Transition

  • jacwynventures · Member ·

    Hi, Sakin, again!

    When I navigate between pages, the font of the top menu quickly changes to the default font before returning to its set font. Is there a way to stop it from doing that?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • sakinshrestha · Theme Author ·

    Hi jacwyndarling,

    We don’t have control on this. I will tag WordPress.com staff for this. If it’s urgent then you might just change to use the chat service.

    Regards,
    Sakin

  • fineandsplendidthings · Member ·

    I had this same issues when I used different fonts (I was using Alegreya for headings, Raleway for body ). In addition to the default font flickering on/off, my site was acting “jumpy.”

    I reached out to WordPress chat for help and was given the following CSS to use in the “Additional CSS” field in the Customizer:

    /* Fix flash of un-styled text | 6595895-hc bc */
    .wf-loading body {
    visibility: hidden;
    }

    HOWEVER: We weren’t able to resolve the problem completely. The site was still very jumpy when clicking across menu options. The person helping me said that at this time the code was the only solution available.

    I ended up going back to the default fonts. Unfortunately the heading font doesn’t work with my branding, so I am using my logo in the header without having my site title in text format. Instead I’ll repeat my site title in the body somewhere. I’m not sure ow to make this work. I may have to go with a different theme altogether.

  • sakinshrestha · Theme Author ·

    @fineandsplendidthings: Sorry for the issue. The font embed is from the WordPress.com itself and we don’t have control on this.

  • jacwynventures · Member ·

    Ok, thanks!

  • fineandsplendidthings · Member ·

    Hi! I was able to fix this issue in my template/site using the CSS code above after all!

    For some reason, when I pasted the code in my CSS box, the “L” in the word “flash” did not come through. I can’t explain how this would happen because I highlighted the entire code, but I went back and corrected it and now there’s no “jumpy” navigation and no flickering of fonts.

    /* Fix flash of un-styled text | 6595895-hc bc */
    .wf-loading body {
    visibility: hidden;
    }

    Hoping you have success as well!

  • jacwynventures · Member ·

    Ah. I don’t think the “L” has anything to do with actual CSS since that line is really just a note, instead of a command.

    I had chatted with WordPress support through the link that Sakin provided. They then went to work on the problem. They emailed that they had found a bug and had messaged the theme developer(s). Perhaps Sakin has already been at it with the help of the WordPress staff?

    Anyways, thanks again for hoping for mutual success! :D

  • fineandsplendidthings · Member ·

    I was just about to come back and update my message when I saw your reply. :-)

    Turns out my problem is fixed only in the customizer view, but not outside of it. So it’s still happening and to your point — has nothing to do with the “L.” (Thank you for the clarification on CSS note versus command. I am not knowledgeable about CSS at all, so I am muddling through).

    That’s great news on a potential bug fix. This template is so beautiful and I really don’t want to pick another one. Looking forward to hearing from Sakin! :-)

  • sakinshrestha · Theme Author ·

    Thanks, everyone for working out and trying to solve this issue. I haven’t heard anything from the support team about this issue. So, hoping to get back soon. Till that time, I even tested other themes here and found the same issue while changing fonts.

  • sakinshrestha · Theme Author ·

    I also trying to the same CSS in the testing site and it’s working fine. 

    /* Fix flash of un-styled text | 6595895-hc bc */
.wf-loading body {
visibility: hidden;
}

    But, Can you let me know what “L” has to do? Do you have a screenshot of “L” issue?

  • fineandsplendidthings · Member ·

    Hi Sakin,

    Sorry I have caused confusion with the “L.” Here’s what happened (to my particular situation), and please know that I have no CSS skills or technical talent whatsoever. :-)

    1) I was on a chat with WordPress support and they provided the CSS code. I did not notice that the word “flash” was missing the L (I cannot figure out how to share a screen shot with you).

    2) I copied and pasted the entire thing and in my case, the flashing font and the jumpiness did not get fixed. I realized afterward that there probably should be an L in there so I went back and added the L. My site then worked great! I thought that fixed the problem, but then I saw that it was working only in the customizer view. The code did

      not

    fix the problem when I viewed my site outside the customizer.

    3) But then it turns out that the L was not an issue anyway, as jacwyndarling pointed out it was not part of the actual code anyway. So it was irrelevant the whole time. My apologies for causing confusion.

  • sakinshrestha · Theme Author ·

    Hi All,

    I checked it all and the one possible remedy here is the use of CSS.
    Please use the following CSS in Custom CSS:

    /* Hide Font Family Loading */
.wf-loading body,
.wf-loading button,
.wf-loading input,
.wf-loading select,
.wf-loading textarea,
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading h6,
.wf-loading .entry-title,
.wf-loading .site-title,
.wf-loading .portfolio-wrapper .entry-title, 
.wf-loading .featured-content-wrapper .entry-title, 
.wf-loading .absolute-header .custom-header-content .section-title, 
.wf-loading .custom-header-content .section-title {
    visibility: hidden !important;
}

    The drawback with this approach is that the text remains invisible until the custom font is loaded.

    Regards,
    Sakin

  • fineandsplendidthings · Member ·

    Hi Sakin,

    Thank you for the new CSS. I used it but unfortunately the problem is still happening.

    I’ve gone back to the default fonts for now.

    Kind regards,
    Denisse

  • jacwynventures · Member ·

    Hi everyone,

    I also tried the additional CSS that Sakin provided. It didn’t seem to work.

    The Support team, I think, is trying to figure out what’s going on in the meanwhile. Sakin even mentioned that he found the same issue on other themes of his.

    Thanks for sticking through this!

    Kind regards.

  • sakinshrestha · Theme Author ·

    Hi Everyone,

    Yes, I try to check and find the solutions. But that is the only CSS that I could find it. I have tagged WordPress.com support staff as well. So, waiting for WordPress.com Support staff to help us here if this is a system or theme issue, as I see the issue in other themes of WordPress.com as well.

    Regads,
    Sakin

  • The topic ‘Remove Visible Font Transition’ is closed to new replies.