ExtJS layout sizing vs. custom fonts

In ExtJS there exists an issue where FlexBox sizing is performed on "fallback" font while the custom font isn't loaded; after the font is loaded the browser then changes the text sizing, with ExtJS not accommodating for it.

by YangHax

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    
    // Google's font; had we used <head> <style> @font-face{ url(... - would be same effect
    WebFontConfig = {
        google: { families: [ 'Indie+Flower::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    
    Ext.define('MyHBoxCnt', {
        extend: 'Ext.Container',
        xtype: 'myhboxcnt',
        style: 'background: tomato;',
        layout: 'hbox',
        items: [{
            xtype: 'component',
            itemId: 'thebox',
            style: "background: cornflowerblue; font-family: 'Indie Flower', cursive;",
            html: 'Some excellent text'
        },{
            xtype: 'component',
            style: "background: saddlebrown; font-family: 'Indie Flower', cursive;",
            html: 'More excellent text'
        },{
            xtype: 'component',
            flex: 1
        }]
    });

    Ext.widget('viewport', {
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: 'anchor',
            defaults: { anchor: '100%' },
            autoScroll: true,
            minWidth: 100,
            items: [{ 
                xtype: 'myhboxcnt' 
            },{
                xtype: 'button',
                text: 'doComponentLayout()',
                handler: function() {
                    Ext.ComponentQuery.query('#thebox')[0].doComponentLayout();
                }
            }]
        }]
    });
    
});