How to make sure that a font is loaded?

[Sebi]

Hi guys,

 

I have encountered a really weird behaviour with webfonts and am looking for a good way to solve this issue.

I programmed 2 functions to check if the font was loaded.

 

@css/main.css

@font-face {	font-family: 'GraphicPixel';	src: url('../fonts/graphicpixel-webfont.eot');	src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'),		 url('../fonts/graphicpixel-webfont.woff') format('woff'),		 url('../fonts/graphicpixel-webfont.ttf') format('truetype'),		 url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg');	font-weight: normal;	font-style: normal;}

@js/util.js

// web font loaded - might want to change that// css solution ....function WebFontLoaded(fonts, callback) {	if(!(fonts instanceof Array)) {		fonts = [fonts];	}	var random = "giItT1WQy@!-/#", // random characters that usually differ in width depending on the font		loader = [];    for(var i = 0; i < fonts.length; i++) {		var span = $('<span>').text(random).css({			"font-family": "sans-serif",			"font-variant": "normal",			"font-style": "normal",			"font-weight": "normal",			"font-size": "50px",			"letter-spacing": "0",			"position": "absolute",			"left": "-2000px",			"top": "-2000px"		}).appendTo('body');		loader.push([span, span.outerWidth()]);		span.css("font-family", fonts[i]);    }	var interval = setInterval(function() {		var count = 0;		for(var i = 0; i < loader.length; i++) {			if(loader[i][0].outerWidth() != loader[i][1]) {				count++;			}		}		if(count == loader.length) {			clearInterval(interval);			for(var i = 0; i < loader.length; i++) {				loader[i][0].remove();			}			callback();		}	}, 50);};

So I create a span with a text in sans-serif, then I change the font and check all 50ms if the offset width has changed, if so -> new font has been loaded.

 

@js/renderer.js

// webfont loaded ... might need to change that?fontLoaded: function(font, callback) {	var check = new PIXI.Text("giItT1WQy@!-/#", { font: "50px MissingFontForPixi" });	var width = check.width;	var interval = setInterval(function() {			            check.setStyle({ font: "50px " + font });	    check.updateText();	    if(check.width != width) {	        clearInterval(interval);	        check.destroy(true);		callback();	    }	}, 50);}

Here I create a textchild with an non-existend font and then I keep upating that textchild. If the width changed (then the font has been loaded)

 

Is there any better way to check if a font has been loaded without having to add any huge apis to my app?

[xerver]

http://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded

 

http://smnh.me/web-font-loading-detection-without-timers/

 

Found a couple methods with minimal searching, have you tried any of these?

[Sebi]

Hi xerver,

 

I will take a look at those later, but all links I click have a different solution, was looking for something more standard, more reliable.

[xerver]

Hi xerver,

 

I will take a look at those later, but all links I click have a different solution, was looking for something more standard, more reliable.

 

There isn't a "Standard" way that I know of, just read up about the problem and try a couple different solutions until you find one you are happy with.

[Sebi]

There isn't a "Standard" way that I know of, just read up about the problem and try a couple different solutions until you find one you are happy with.

 

And that is the sad part. I expect my browser to know when a font is ready, since it has to render the font as it is loaded and I don't see why the browser could not report back to me about the readystate. But I believe that is not the right place to discuss that issue.

 

I have adjusted my own method and hope that it will work properly on all devices.

Thanks anyway.

[d13]

I've also been struggling with this and have read everything on the subject, just like you have.

My last hope is that someone will post something incredibly clever in this thread.

Any takers ... ?

Until then, the only reliable way to load fonts seems to be bitmap texture atlases and Google's web font loader:

 

https://github.com/typekit/webfontloader

 

... a huge hulking API for something that should be really simple

 

UPDATE: I found something pretty useful! Font.js:

 

http://pomax.nihongoresources.com/pages/Font.js/

[patrickfabrizius]

Found this thread while searching for a solution ... 

 

The solution I settled for is to use the webfont in the markup (could be an invisible tag, for example inside a <noscript> tag.)

That way the browser makes sure the webfont is loaded before rendering the page, which is also before the canvas stuff begins. Not optimal if you want a more streaming experience, but in my case the webfont is used on the first screen of the game so works for me. 

 

Hope this could be helpful to someone in the future.

[mattstyles]

Webfontloader is a small library that normalises font loading across platform and across provider. Just install from npm or include in the page, it will then accept a callback or I think it even returns a promise now too so it's a quick and simple solution that solves your problem explicitly, I'm not really sure why it's not job done.

Font.js isn't really designed for what you're after a polling the width of a span sounds crazy but it is exactly what webfontloader does on most platforms.

Webfontloader will, by default, append classes to your HTML tag, so you can use those to hide content if you don't mind the page loading, or you can use a mutation observer to respond when the class changes (overly complex when the library exposes both a callback and a promise).

I think it even has a synchronous mode, stuff in the head blocks the page so whack it in there and the browser won't do much until your fonts are ready.

But, seriously, use the lib and use the callback. Load other stuff while the font is loading then crack on with the rest of your app/game/whatever

[Thram]

Hi there, new guy here.

I was dealing with the same problem and after try all these solutions I ended up finding this library: https://github.com/bramstein/fontfaceobserver

That finally solved my problem.

I hope you find it useful guys.

[felixturner]

Some good solutions here: https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/