0

I am trying to measure the width of a specific character from a webfont. The active event provided by Google's Webfont Loader fires slightly too early and the measurement it made on the default font.

A stripped down version of the script that I am working with:

window.WebFontConfig = {
    google: {
        families: ['Anonymous Pro:400,400italic,700,700italic']
    },

    active: function () {
        $.fn.ready(MeasureM);
    }
};

function MeasureM() {
    var e = document.getElementById('div');
    e.style.font = "15px/15px 'Anonymous Pro'";
    e.appendChild(document.createTextNode('M'));
    console.log(e.offsetWidth, e.offsetHeight);
}

(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);
})();

The HTML element:

<div id="div" style="display: table;"></div>

For convenience a jsFiddle.

The issue that I am having appear to only happen in Firefox, is there a solution? Or, is there something that I am misunderstanding?

Timesquare
  • 399
  • 2
  • 12
  • Could you not simply ditch Webfont Loader, load the custom font using `@font-face` in a CSS file and wait for the document's `load` event to fire before measuring? – Tim Down Mar 19 '13 at 10:47
  • @TimDown I tried that; waiting for the page load event and then attempting to measure the font width still returns the wrong value. – Timesquare Mar 19 '13 at 21:46
  • Fair enough. I thought that had previously worked for me but I may well be wrong. – Tim Down Mar 20 '13 at 09:22
  • Seems that IE and Mozilla wait for web fonts to load before firing the document's `load` event but WebKit does not, so my suggestion is no good. – Tim Down Mar 31 '13 at 12:54

0 Answers0