For the job we will use typekit/webfontloader and include it into our index.html

<script type="text/javascript" src="scripts/webfont.js"</script>

Browse Google Fonts site and choose your favorite font.
Then in main.js define variable fontName with choosen font name.

var fontName = 'Indie Flower';

Setup window.onload function to start loading the font and call start(); to initialize Pixi scene when font loading is done.

window.onload = function()
{
	WebFont.load(
	{
		// this event is triggered when the fonts have been rendered, see https://github.com/typekit/webfontloader
		active : function()
		{
			start();
		},

		// multiple fonts can be passed here
		google :
		{
			families: [ fontName ]
		}
	});
};

While this piece of code will work on most desktop browsers and PIXI.Text will be rendered correctly and showing our recently loaded font, some mobile browsers may be having troubles with it - showing default font instead. The reason is that font needs to be pre-rendered first.

There are few ways how to solve it:

- use CSS @font-face, which we will ignore for this case

- create temporary PIXI.Text to let browser initialize the font and after that use another PIXI.Text - the one we want to show to user. Pretty ugly if you are asking me.

- listen to webloader fontloading event, pre-render font on DOM and then call start();

Some fonts need certain amout of time to be rendered, so we will need to wait a sec to be sure everything is prepared for the show.

Here is full source code of main.js together with PIXI code, which may be extended to universal webfont preloader by repeating fontloading handler for every font loaded.

// browse https://fonts.google.com/ and pick your favourite one
var fontName = 'Indie Flower';

window.onload = function()
{
	WebFont.load(
	{
		// this event is triggered when the fonts have been rendered, see https://github.com/typekit/webfontloader
		active : function()
		{
			// let browser take a breath. Some fonts may require more room for taking deep breath
			setTimeout(function()
			{
				start();
			}, 500); 
		},
		
		// when font is loaded do some magic, so font can be correctly rendered immediately after PIXI is initialized
		fontloading : doMagic,
		
		// multiple fonts can be passed here
		google :
		{
			families: [ fontName ]
		}
	});
};

// this one is important
function doMagic()
{
	// create <p> tag with our font and render some text secretly. We don't need to see it after all...
	
	var el = document.createElement('p');
	el.style.fontFamily = fontName;
	el.style.fontSize = "0px";
	el.style.visibility = "hidden";
	el.innerHTML = '.';
	
	document.body.appendChild(el);
};

function start()
{
	// get available browser window viewport width / height 
	var w = window.innerWidth;
	var h = window.innerHeight;

	// initialize renderer
	renderer = PIXI.autoDetectRenderer(w, h);
	
	// create stage
	stage = new PIXI.Container();
	
	// append renderer to DOM
	document.body.appendChild(renderer.view);

	// define text style
	var style =
	{
		fontFamily    : fontName,
		fontSize      : '69px',
		fill          : '#c1f5ff',
		padding       : 20, // some fonts may require additional space around themselves to render correctly
		wordWrap      : true,
		wordWrapWidth : w
	};

	// create text
	var myText = new PIXI.Text('Lorem Ipsum is simply dummy text', style);
	
	// position text to screen center
	myText.anchor.set(0.5);
	myText.x = w / 2;
	myText.y = h / 2;
	
	// add myText to stage
	stage.addChild(myText);
	
	// render stage once
	renderer.render(stage);
};

SEE IT IN ACTION