javascript - jQuery プラグイン内のテキストの問題の Web フォントと幅

Question

私は新しいサイトに取り組んでおり、webfont を使用してツールチップ プラグインを追加したいのですが、ツールトップの位置が間違っていますが、webfont を使用しない場合に機能します。

プラグインのコードは次のようになります。

$.fn.tooltip = function(options) {
    var settings = $.extend({}, {
        arrowSize: 5
    }, options);
    return this.each(function() {
        var self = $(this).attr('title', '');
        var wrapper = self.wrap('<div/>').parent().addClass('tooltip-wrapper').
            css('position', 'relative');
        var tooltip = $('<div/>').appendTo(wrapper);
        var box = $('<div/>').addClass('box').appendTo(tooltip);
        var arrow = $('<div/>').addClass('arrow').appendTo(tooltip).css({
            'border-left-width': settings.arrowSize,
            'border-right-width': settings.arrowSize,
            'border-top-width': settings.arrowSize
        });
        var width = box.html(self.attr('rel').replace(/ /g, '&nbsp;')).
            innerWidth();
        tooltip.css({
            top: -self.height(),
            left: -(width-self.width())/2
        }).addClass('tooltip');
        self.mouseenter(function() {
            tooltip.stop().fadeIn('fast');
        }).mouseleave(function() {
            tooltip.stop().fadeOut('fast');
        });
    });
};

フォントがロードされる前に実行されることに依存しinnerWidthていると思います。生成されたコードは次のようになります。

<div class="tooltip-wrapper" style="position: relative;">
    <a href="https://twitter.com/jcubic" title="" rel="Twitter">
        <img src="img/profile-twitter.png">
    </a>
    <div class="tooltip" style="top: -32px; left: -25.5px; display: none; opacity: 1;">
        <div class="box">Caption</div>
        <div class="arrow" style="border-left-width: 5px; border-right-width: 5px; border-top-width: 5px;"></div>
    </div>
</div>

とCSS

.tooltip {
    display: none;
    position: absolute;
    z-index: 100;
}
.tooltip-wrapper .box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #b72100;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
}
.tooltip-wrapper .arrow {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-top: 5px solid #b72100;
    margin: auto;
}

この質問に関連していると思います: Cross-browser webfonts loaded event。

それを修正する方法はありますか？別のCSSを使用している可能性があります。