Problem rendering web fonts

[palanolho]

Hi everyone,

I'm having a problem rendering some web fonts and I have been bashing my head and searching online but I'm not able to figure it out. Maybe someone will know what the issue is and how to sort it out.

I'm using a google font call "Lato". I need it in Normal, Bold and Black.

 

So I copied the embed link from Google and includes it in my index (i'm also using the google WebFontLoaderJS to help load the font - https://github.com/typekit/webfontloader)

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

 

Then on my main JS I load the font and once the font + assets are loaded, I call the init() which renders the everything else.

var fonts_ready = false;
var assets_ready = false;

WebFont.load({
	google: {
		families: ['Lato']
	},
	active: function() {
		fonts_ready = true;
        preloaderCheck();
    }
  });

PIXI.loader
    .add("image1","img/image1.png")
    .load(function() {
        assets_ready = true;
        preloaderCheck();
    });

function preloaderCheck() {
	if (fonts_ready && assets_ready)
		init();
}

function init() {
    //... render everything
}

 

My problem is that, when rendering the text using this "Lato" font, the system doesn't understand "bold" nor 900 (black)

If I use fontWeight: "normal" or fontWeight: 400 it works fine and I see the "Lato" font with the normal/regular style.

However, If I try fontWeight : "bold" or fontWeight: 900 it will render using some fallback font.

So basically if I have text in normal, bold and black, I see the normal correct and the other two with a fallback font, all on the same canvas.

// this works fine
var myText1 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: "normal",
	fill: ['#ffffff']
});


// these dont work and render with some fallback font
var myText2 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: "bold",
	fill: ['#ffffff']
});

var myText3 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: 900,
	fill: ['#ffffff']
});

 

I created a JSFiddler to illustrate the issue. Once you open it you should be able to see the issue but if you run it again, it will work fine. I tried to refresh my page (F5 / CRL+F5) to see if it would have the same behaviour on my code but it doesn't.

https://jsfiddle.net/palanolho/5ahvub7e/

 

Does anyone know what could be the problem?

 

Many thanks in advance for any help/guidance you can provide

- Miguel

[jonforum]

seem work on my side ? 

or am not understand your issue ! ?

[bubamara]

its working straight away on FireFox and failing on Chrome for me

give it little timeout and will be working on Chrome as well :/

setTimeout(function()
{
    init();
}, 10);

 

[palanolho]

@jonforum That's what I said. On JSFeedles, for me, it didn't work the first time but after that it worked always fine.

On my other webside it doesn't work

Try using incognito mode (if you don't mind) to see if it replicates (it does to me)

 

@bubamara I tried it but it didn't work for me, still see the fallback fonts :S ever tried with like 3 seconds

[palanolho]

OK, I found something that is interesting and may give and hint to someone.

When I load the page for the first time (or refresh using CTRL+F5), the fonts show incorrectly.
however, once the page is loaded, if I refresh the page using only F5, the fonts show correctly.

Does this ring the bell to anyone? :S

Many thanks in advance,
- Miguel

[bubamara]

@palanolho could you try it with doMagic() method as described here ? http://www.enea.sk/blog/preloading-web-font-pixi.js.html

[palanolho]

@bubamara it worked ... but it feels so hacky :S

Why is this situation happening and not everyone sees it ?

[bubamara]

hacky or not, if its working, dont scratch it

why is it happening? no idea. yours example worked for me on firefox with no modifications to code, timeout was enough for chrome. guess its browser who decides