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() fires callback functions when fonts start and finish loading. — Blazemonger

Blazemonger Blazemonger · Accepted Answer · 2015-12-30T14:50:18

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.

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

2 Answers