var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'google_webfonts', { 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(Phaser.Timer.SECOND, createText, this); },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    // nanumGothic: {
    //   families: ['Nanum Gothic']    // ['Revalia']
    // },
    google: {
      families: ['Nanum Gothic', 'Nanum Brush Script']    // ['Revalia']
    }

};

function preload() {

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

}

var text = null;
var grd;

function create() {

    game.stage.setBackgroundColor(0x2d2d2d);

}

function createText() {

    text = game.add.text(game.world.centerX, game.world.centerY - 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
    text.anchor.setTo(0.5);

    // text.font = 'Nanum Gothic';
    text.fontSize = 60;

    text2 = game.add.text(game.world.centerX, game.world.centerY, "기본 default 글꼴");
    text2.anchor.setTo(0.5);

    // text2.font = 'Nanum Brush Script';
    text2.fontSize = 60;

    text3 = game.add.text(game.world.centerX, game.world.centerY + 150, "- phaser -\n나눔 고딕 웹 폰트\ngoogle web fonts");
    text3.anchor.setTo(0.5);

    text3.font = 'Nanum Brush Script';
    text3.fontSize = 60;

    //  x0, y0 - x1, y1
    grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height);
    grd.addColorStop(0, '#8ED6FF');   
    grd.addColorStop(1, '#004CB3');
    text.fill = grd;

    text.align = 'center';
    text.stroke = '#000000';
    text.strokeThickness = 2;
    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5);

    text.inputEnabled = true;
    text.input.enableDrag();

    text.events.onInputOver.add(over, this);
    text.events.onInputOut.add(out, this);

}

function out() {

    text.fill = grd;

}

function over() {

    text.fill = '#ff00ff';

}