loading cached fonts at the right time

Question

I have some webfonts that get loaded via Webfontloader load like this ...

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
    WebFont.load({
        custom: {
            families: ['BlenderProBook', 'BlenderProMedium']
        }
    });
</script>

And it works great when first loading the page ... Problems is, when refreshing the page it only retrieves the cached fonts when requested in html and not before my ReactJS app runs (when the Webfontloader normally gets them). This is too late for me, because I'm using them in pre-generated SVG.

Is there a way to force it to get the uncached fonts each time? Or better, load the cached fonts at the correct time.

score 0 · Accepted Answer · answered Mar 04 '15 at 14:29

I found a solution to this, which I will take as my answer if no-one else can supply a better one.

My font is being used extensively in the app to calculate text widths and therefore layout ... (which is why it needs to be loaded before the app runs), so I decided to use the text width code as a test to block the app from running.

Here's the code

var testFont = require('./components/svgText.js');
var timer = setInterval(function () {
    var test = (testFont('TEST', 'BlenderProBook', 20).width === 39.75);
    if (test) {
        clearInterval(timer);
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body);
        });
    }
}, 50);

where svgTest.js uses Raphael SVG to generate SVG text and retrieve the measurements like this:-

renderedTextSize = function (string, font, fontSize) {
    var paper = Raphael(0, 0, 0, 0);
    paper.canvas.style.visibility = 'hidden';
    var el = paper.text(0, 0, string);
    el.attr('font-family', font);
    el.attr('font-size', fontSize);
    var bBox = el.getBBox();
    paper.remove();
    return {
        width: bBox.width,
        height: bBox.height
    };
};

module.exports = renderedTextSize;

This seems to work quite nicely, even though it feels a bit hacky to be testing against a magic number (width).

loading cached fonts at the right time

1 Answers1