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
;
Load the plugin
type: PhaserAUTO parent: 'phaser-example' width: 800 height: 600 scene: preload: preload create: create plugins: global: key: 'WebFontLoader' plugin: WebFontLoaderPlugin start: true ;
Load a font
{ thisload;}
Use it
{ thisaddtext400 300 'Hello there' fontFamily: 'Open Sans' fontSize: '12px' ;}
Fonts with multiple variants
{ thisload;} { thisaddtext400 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 |
thisload;