jQuery Plugin working but taking ~5sec to apply after full site loads

I assume this is due to the custom web font you are loading ‘Antonio’.
As you are waiting for the document to be ready and only then you are loading the custom font.
Your whole page load takes 3~ seconds, then the custom font might take a long time to load as well.
Can you try this without the WebFont Load?

jQuery(document).ready(function($) {
       $('.thumbnail-text').bigtext();
});

Let’s see if this way it takes as the Page Load, then we can be sure it’s related to the custom web-font.

I tried that and it’s not applying at all now. Not quite sure what that tells us.

I just noticed you have a JS error from from a plugin called Instafeed.js:

Uncaught Error: No element with id=”instafeed” on page.

This error causes no JS code to run after it,
so as the jQuery load & bigtext script is right after it, it won’t run.

Please remove that Instafeed script from the HTML script tag:
* We’ll get it back later after we isolate the problem ??

var userFeed = new Instafeed({
            get: 'user',
            userId: 211932878,
            accessToken: '211932878.1654d0c.2e59f050a56f4082bd9e15e47c3dfa8e',
            limit: 6,
            resolution: 'standard_resolution',
            get: 'tagged',
            tagName: 'trishmakesstuff',
            template: '<a href="{{link}}"><div class="insta"><div class="center"><img src="{{image}}" class="{{orientation}}"/></div> <div class="insta_caption">{{caption}}</div><div class="insta_stats"><span class="insta_likes">{{likes}}</span> <span class="insta_comments">{{comments}}</span></div></div></a>'
         });
        userFeed.run();

jQuery(document).ready(function($) {
       $('.thumbnail-text').bigtext();
});

so it stays just like this:

jQuery(document).ready(function($) {
       $('.thumbnail-text').bigtext();
});

As I ran in the console the following command and it inflated the text immediately:

jQuery('.thumbnail-text').bigtext()

So the problem isn’t related to bigtext.js itself.

Okay, I cut it down to that code and it still isn’t working on my end ??

Don’t worry trish, we are getting closer ??
Now at least we don’t have the JS error.
I noticed something weird, if I resize the viewport horizontally, it immediately puts the bigtext inflation into effect – i’m trying to figure out why this trigger’s bigtext.js .
I see you are using Isotope, it might be related, as it triggers some inline-styling changes with JS for each resize…

– “Every bug is destined to be solved” – Myself ??

ok, investigated a little and found some insights…
Hold on, it get’s a bit tricky :)…

First of all, we are not alone…
Here are some closed issues in Github of people who experienced similar issues:
https://github.com/zachleat/BigText/issues/16
https://github.com/zachleat/BigText/issues/24

So basically, it seems that BigText should be triggered only after the font has been loaded.
Now i’v seen you use ‘Antonio’ for the bigText lines, in your CSS.
So what happens is that we trigger it before the font was loaded, therefore it doesn’t work.
But when we resize, the font has already been loaded, so it inflates it properly.

So as you did in the beginning, you should put back the WebFont Loader:
as it ‘Listens’ to the font you require and executes the ‘active’ function only when it was really loaded.

jQuery(document).ready(function($) {
            WebFont.load({
                custom: {
                    families: ['Antonio', 'AntonioLight'],
                    urls: ['url_to_your_main_stylesheet.css']
                },
                active: function() {
                    $('.thumbnail-text').bigtext();
                }
            });
        });

But look closely, theres another thing to fix…
I noticed you used ‘@font-face’ to load ‘Antonio’, inside your HTML…

<style>
        @font-face {
    font-family: 'Antonio';
    src: url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.eot');
    src: url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.woff2') format('woff2'),
         url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.woff') format('woff'),
         url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.ttf') format('truetype'),
         url('https://trishss.com/wp-content/themes/infinitythemetrust/fonts/antonio-regular-webfont.svg#antonioregular') format('svg');
    font-weight: normal;
    font-style: normal;
        }
    </style>

You should move it inside your stylesheet that is in the WebFont Loader [urls], in order for this to work…

Let me know how it goes ! ??

Thank you so much for all of your help! I did what you said and the text is applying again, however I am still having the same delay.

mmm, that’s a classic case of FOUT (Flash of un-styled content).
I’v seen a lot of posts talking about FOUT issues that can be fixed with the WebFont Loader.
Give it a search, i’l see if I find anything too (you got me challenged…)
Anyway, in the mean time, you can add to your css:
‘
transition: font-size 1s linear;
‘
Add it to the inflated text lines classes,
it will at least make the transition more smooth with a slight animation, rather than just suddenly popping.

I looked into FOUT (always fun to learn a term for these kinds of these, ha) but I don’t know if that’s necessarily what this is? The webfont is applying just fine right away (at least it seems to for me – and I don’t have it installed on my computer and see the default font when I am moving things around which means it is coming from the web font, right?)

So there is no delay on applying the correct typeface, just on applying the text size through the big text js.

I have been playing with this again, and have narrowed down these random things: –
Something with the Custom Font Loader aspect seems to be what is causing the delay, and if I try to remove the , ‘AntonioLight’ from the code, it will not load the effect at all despite the fact that I do not have Antonio Light even loaded as a typeface. Putting any nonsense as the second font seems work even, and having the second typeface listed seems to be the only thing I can do that makes the bigtext.js even apply at all on the thumbnails.

If I use big text on the non custom text it fires just fine on page load, but does not work on the thumbnails without the second thumbnail. Once second typeface is added, both custom and non-custom bigtext aspects work, but take the delay to apply.

Not even sure what this tells me or if this can tell anyone anything, but am documenting it.