FOUC

  • simiandjulien · Member ·

    Hello everybody,

    I’m having a FOUC issue with the Puzzle theme.
    I’m surprised to be the first one bringing this up…

    Basically anytime I load a page, the font doesn’t load right away. It first displays the “basic font” then load the one I chose. It is a big problem for me as this theme is quiet expensive and I bought it thinking it’ll working out of the box.

    Thanks for your help.
    Julien

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

  • binarymoon · Theme Author ·

    Hi Julien – sorry about the problems you’re seeing with the site. This sounds like it’s an issue with the custom fonts upgrade so I shall ask the wordpress.com team to look into it for you.

  • simiandjulien · Member ·

    Hi,

    Should I just wait for them to get back to me?
    Can I use my own fonts thru wordpress.com and the css upgrade?

    Thanks for quick reply anyway :)
    Julien

  • binarymoon · Theme Author ·

    Hi there – the wordpress.com team will reply when they have a chance. They’re normally pretty quick (however this is a weekend so they may be slower).

    As far as I know you can’t use your own fonts using the custom css upgrade I’m afraid.

  • kathrynwp · Staff ·

    Can I use my own fonts thru wordpress.com and the css upgrade?

    I loaded up your site parisianfoodlover.com a few times in different browsers but wasn’t able to see the default fonts loading before the custom ones – the custom fonts appeared right away.

    There are a couple of possibilities:

    – The Typekit server which serves up custom fonts may have been slow at the times you’ve tried to view your site.
    – Your Internet connection may be a bit slow – have you tried viewing your site from a different ISP/network? Do you see the site as expected there?

    Just to confirm what binarymoon said, it’s not possible to use your own fonts with the Custom Design upgrade. You can always specify a system font with custom CSS, i.e. a font you think is likely to be installed on people’s computers, like Verdana, Georgia, Helvetica, etc.

    I noticed a couple of things in your custom CSS that I wanted to point out:

    – This piece of non-CSS code won’t be parsed: 

    $(function() {
    $('body').hide();
    $(window).load(function(){
        $('body').show();
    });
});

    – This piece of CSS isn’t complete so it won’t have any effect:

    !important
overflow-y: auto;
overflow-x: hidden

    – It looks like you’ve hidden the WordPress.com footer credit. All WordPress.com sites – even those of VIP clients – are required to maintain their footer credit as part of our Terms of Service. Could you please restore the missing credits? You can definitely keep the additional wording you added through #footer:after – you just need to restore the default footer text as well. Thanks.

  • simiandjulien · Member ·

    Hello,

    I also tried and checked this font issue on multiple devices from multiple locations and the problem is always the same.
    I might do a video and post it to show you the issue.

    I restored the footer to respect your terms of service but would then appreciate your help on this.

    Thanks.

  • designsimply · Member ·

    I also tried and checked this font issue on multiple devices from multiple locations and the problem is always the same.

    This is helpful to know. Do you happen to know if any other visitors to your site have reported seeing the same problem?

    I might do a video and post it to show you the issue.

    I’m not sure that’s needed. Let me check in with developers first and then let you know if a video would be the best data to gather from you or if something else would be more helpful.

    I did try to repeat the problem myself, but I couldn’t see it. Here is my test:

    https://cloudup.com/cYvN9QscDE2 (Length: 0:30)

    I do see a flash at 0:14 in the video, but the font looks to be correct to me throughout.

    I used Firefox 31.0 in my test, is that one of the browsers you tested too?

  • simiandjulien · Member ·

    Hi there,

    That is high quality help. Definitely appreciate that.

    This is helpful to know. Do you happen to know if any other visitors to your site have reported seeing the same problem?

    I haven’t launched yet but yeah the people who’ve tried it told me they saw the header font pretty big and different, then shrinking and changing to its final form. This is literally a 1 second thing but it just make the website looks not very professional. I’m sure you understand my concern.

    I do see a flash at 0:14 in the video, but the font looks to be correct to me throughout.

    I do see this flash you’re having.
    My issue is that this flash lasts a much longer time on another devices and/or computer. Which, again, makes it look messy.

    I used Firefox 31.0 in my test, is that one of the browsers you tested too?

    I’ve tested on the latest chrome and safari versions.

    I’d be happy to provide more information to help you sort this out with me… The WORLD needs to see my food blog as pretty as possible ;)

  • designsimply · Member ·

    simiandjulien, I did some more digging and I found the following related help page on typekit.com:

    http://help.typekit.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events

    Typekit is the web fonts provider we use at WordPress.com.

    Based on that help article, a flash is something the browser does in some cases and the advice is to hide the content while the font is loading and only display it after the font is loaded and ready. I checked our custom fonts code, and it looks to me that we follow that recommendation. However, I’m going to see if I can get a developer to also take a look and help me confirm that.

    Out of curiosity, I searched for and tested several other websites to see if I could see a flash of unstyled text on those even if I couldn’t see one on http://parisianfoodlover.com/

    I don’t see the problem you descried on these sites either, but I was wonder if you do? Take a look at the site titles for these:

    http://lobotero.com/
    http://firstlookthencook.com/
    http://revistatonica.com/

    Look at the post titles on these:

    http://blog.encausse.net/
    http://unfrozenphotography.com/2014/08/07/maya/
    http://flinganusa2015.com/what-do-we-stand-for/

  • designsimply · Member ·

    I thought of a couple more questions:

    Who is your local internet service provider?

    Do you have any browser extensions installed, e.g. Ghostery?

  • simiandjulien · Member ·

    Hey designsimply,

    My local provider is a french one called “free” but I ‘ve used many others to check this issue.
    I don’t have an extension called Ghostery or any other one.

    I don’t see any problem that looks like mine on these other websites you posted.

    I still see the same problem on every desktop device I test my website on…

  • The topic ‘FOUC’ is closed to new replies.