JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
  preload: preload,
  create: create
});

//  The Google WebFont Loader will look for this object, so create it before loading the script.
WebFontConfig = {

  //  'active' means all requested fonts have finished loading
  //  We set a <1 second delay before calling 'createText'.
  //  For some reason if we don't the browser cannot render the text the first time it's created.
  active: function() {
    game.time.events.add(100, createText);
  },

  //  The Google Fonts we want to load (specify as many as you like in the array)
  google: {
    // families: ['Roboto'] // includes weights 400, 700
    families: ['Roboto:100,200,300,400,500,600,700,800,900']
  }

};

function preload() {

  //  Load the Google WebFont Loader script
  game.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');

}

function create() {

  game.stage.setBackgroundColor(0xeeeeee);

}

function createText() {

  var weights = ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
  var x = 20;
  var y = 20;
  var d = 50;
  
  for (var weight of weights) {
  	var txt = game.add.text(x, y, '', {fill: '#0074D9', font: '24px Roboto'});
    txt.fontWeight = weight;
    txt.text = txt.style.font;
    y += d;
  }

}