Google webfonts weight setting in Phaser

[JacobO]

Hi,

I have read quite a few posts on the subject, so I know this has been mentioned a lot, but I didn't find a good solution for this.

I'm loading Google webfont from within the game using WebFontConfig:

WebFontConfig = {
    google: {
      families: ['Roboto']
    }
};

and:

	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');

I can set a text to use the google font (Roboto, for example) without a problem, but I can't set its weight. I believe it defaults to 400.

I know that using .fontWeight won't work, so I tried as someone offered in another post:

{font: '100 20px Roboto'} 

but it won't work either (it actually resets the text font to the default browser font).

I also tried loading specifically Roboto:100,400 in the WebFontConfig but that doesn't work either.

Any suggestions?

 

 

[samme]

In text/google webfonts all of these work (run in console):

text.fontWeight = "400";
text.fontWeight = "700";
text.fontWeight = "normal";
text.fontWeight = "bold";

 

[JacobO]

Unfortunately, fontWeight setting doesn't work, neither in the example you attached, nor in my projects. 

please see here, and play with the fontWeight:

https://jsfiddle.net/adk7sw2k/

Any other ideas?

[samme]

https://jsfiddle.net/sxspvhyk/2/

[JacobO]

Thanks,

I figured out how to replicate this, but I still don't understand why this is happening in my code.

It works when I set :

    instructionsText=game.add.text(x,y,'',{fill:'#fff',wordWrap: true, wordWrapWidth: 400, font:'18px Roboto' });
instructionsText.fontWeight='100';

and doesn't work when I set:

instructionsText=game.add.text(x,y,'',{fill:'#fff',wordWrap: true, wordWrapWidth: 400 });
instructionsText.font='18px Roboto';
instructionsText.fontWeight='100';

I'm probably missing something. Why doesn't the second option work?

[samme]

The font property (unlike the style.font argument) is the font name.

instructionsText.font = 'Roboto';

 

[samme]

This should also work:

game.add.text(x, y, '', {fill: '#0074D9', font: '100 24px Roboto'});

See https://jsfiddle.net/sxspvhyk/3/