Building Game with Phaser: Integrating Custom fonts for your game

August 20, 2026

You can use google fonts in your Phaser game

Yep you can, here’s how.

• Download the google font and import in your game assets and preload them.
• Without downloading and adding fonts file in your asset you can also use google fonts CDN and add it to your index.html and then preload them.

👌Why do you need to preload them fonts? Well Phaser renders text to canvas element and your font must be fully downloaded and loaded into the browser memory before Phaser draws the text.

How to use bitmap text

Bitmap text is a image of letters that are created for the purpose of using them as alternative font for your game or any old digital interfaces. But in this case we’re using it for our Phaser game.

First thing first is preload()

function preload(){
	this.load.image('bitmap_text_image', 'your/image/asset/destination', 'your/datafile/asset/destination');
}

This is very straight forward to preload the image and it’s data file if any.

👌A data file is a file with details of the specific characters coordinates. But this data file is not always needed specially if your text / font used a fixed-width grid layout.

Next is to create or draw the bitmap font to the game. If you’re using the custom font you’ve imported and doesn't have a data file you’ll need to add configuration so Phaser knows how to draw each letters.

function create(){
	const config = {
		image: 'fontName',
		width: 8,
		height: 8,
		chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
		charsPerRow: 10,
	}
	
	const parsedFont = Phaser.GameObjects.RetroFont.Parse(this, config);
	this.cache.bitmapFont.add('bitmap_text_image', parsedFont);
	
	this.add.bitmapText(100, 100, 'bitmap_text_image', 'YOUR TEXT HERE');
}

If you have bitmap text data file ( as long the xml or json follows the correct data pattern with Phaser) you don’t have to do this the config setup dance

function create(){
	this.add.bitmapText(100, 100, 'bitmap_text_image', 'YOUR TEXT HERE', 32);
	// ( X, Y, Font Key, Text string, Font size);
}

Why use Bitmap text?

It really depends on your need for your game. If you want to use specific font that is only available for you or you made it specifically for your game then I suggest better use bitmap import. But in most cases default font for the browser will suffice.

You can always refer to the Phaser documentation for more details and other methods.