How to trigger equalizer after fonts have loaded or on reflow?

Question

I am having an issue with Foundation's equalizer plugin firing too soon after the DOM is ready. I am loading in some TypeKit fonts and they take a few milliseconds to load in but the equalizer plugin is firing before the fonts load.

What happens is the fallback font (which is a different height than my TypeKit fonts) is visible for a very short time, maybe 50ms. Equalizer is applying heights to my divs when the fallback font is visible. The fallback font is taller and in some cases its making lines of text break to 2 lines.

Then when the TypeKit font loads the divs don't resize. They're being left too tall because their height was adjusted when the fallback font was visible.

So... is there a way I can fire the equalizer plugin after TypeKit fonts load? Also, I've seen there is a way to fire the plugin on reflow which might be best, but I see nothing about reflow in Foundation 6, just 5.

[`Typekit.load()`](http://help.typekit.com/customer/portal/articles/6787-Font-events) fires callback functions when fonts start and finish loading. — Blazemonger, Dec 30 '15 at 14:47

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

After reading the Typekit and Foundation 5 Equalizer docs (Foundation 6 docs, too), I would try this:

try {
    Typekit.load({
      active: function() {
        // JavaScript to execute when fonts become active
        $(document).foundation('equalizer', 'reflow'); // Foundation 5
    // OR
        var elem = new Foundation.Equalizer(element); 
        elem.applyHeight();         // Foundation 6

      }
    })
} catch(e) {}

That said, the modern way to make elements equal in height is to use flexbox in your CSS, instead of a JavaScript plugin.

edited May 23 '17 at 11:52

Community

1
1

answered Dec 30 '15 at 14:50

Blazemonger

90,923
26
142
180

Thanks.. I'm using Foundation 6 though. The docs for javascript on their site aren't very thorough :( – Dustin Dec 30 '15 at 14:55
Thanks. I tried flexbox briefly but it doesn't seem to be playing nicely with the float based grid. Going to keep working down the equalizer route. For some reason nothing is getting fired in TypeKit's active function, not even a console.log. Another thing with that Equalizer documentation is I'm not sure what `element` should be. I find the documentation on this plugin severely lacking :( Might try a completely different plugin like jquery.matchHeight.js. – Dustin Dec 30 '15 at 15:19
I got it to work with a different plugin called jquery.matchHeight.js. Just not sure how to use the equalizer plugin programmatically because the docs aren't clear enough IMO. – Dustin Dec 30 '15 at 15:32
You're right about flexbox not playing nicely with floats -- you can only have one or the other. But perhaps you could wrap the boxes in question in a full-width container and apply flexbox that instead. – Blazemonger Dec 30 '15 at 16:16
This is a cleaner way to re-apply heights in Foundation 6 https://stackoverflow.com/a/45033229/24267 – mhenry1384 Oct 16 '19 at 18:10

score 0 · Answer 2 · edited Apr 18 '20 at 13:36

After trying all sorts of workarounds I just simply changed the Typekit include code from (the old) JavaScript embed to the CSS snippet:

From this:

<script src="https://use.typekit.net/yourprojectcode.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

To this:

<link rel="stylesheet" href="https://use.typekit.net/yourprojectcode.css">

Equalizer then worked fine.

How to trigger equalizer after fonts have loaded or on reflow?

2 Answers2