Phaser 3 Webfont Loader

A webfont loader for Phaser 3 that uses CSS @font-face to download the font and FontFaceSet to trigger / detect the load.

If the browser does not support FontFaceSet (see compatability table) the loader will attempt to inject an invisible HTML element into the page to trigger the browser to download the font file. A delay of 50ms is waited for before loading completes and the element removed. This delay is configurable in Loader Config

Installation

$ npm install -D phaser3-webfont-loader

Usage

Import the plugin

import { WebFontLoaderPlugin } from 'phaser3-webfont-loader';

Load the plugin

new Phaser.Game({
  type: Phaser.AUTO,
  parent: 'phaser-example',
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  },
  plugins: {
    global: [{
      key: 'WebFontLoader',
      plugin: WebFontLoaderPlugin,
      start: true
    }]
  }
});

Load a font

function preload() {
  this.load.webfont('Open Sans', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
}

Use it

function create() {
  this.add.text(400, 300, 'Hello there', {
    fontFamily: 'Open Sans',
    fontSize: '12px'
  });
}

See a working example

Fonts with multiple variants

function preload() {
  this.load.webfont({
    font: 'Roboto',
    variants: [
      'normal',
      '100',
      '700',
      '700 italic'
    ]
  }, 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,500;1,400;1,700&display=swap');
}
 
function create() {
  this.add.text(400, 300, 'Hello there', {
    fontFamily: 'Roboto',
    fontSize: '12px',
    fontStyle: '700 italic'
  });
}

Loader Config

config	description	default
testString	2nd argument for FontFaceSet.load()	""
legacyTimeout	Time (in ms) to wait before sending success callback to Phaser Loader	50

this.load.webfont('Open Sans', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', {
  testString: 'Text Here',
  legacyTimeout: 100
});