Webfont loader

Introduction

Load web font by google webfont loader in payload or preload stage.

  • Author: Rex
  • Custom File of loader

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    var sceneConfig = {
        // ....
        pack: {
            files: [{
                type: 'plugin',
                key: 'rexwebfontloaderplugin',
                url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/    rexwebfontloaderplugin.min.js',
                start: true
            }]
        }
    };
    class MyScene extends Phaser.Scene {
        constructor() {
            super(sceneConfig)
        }
        // ....
    
        preload() {
            // rexwebfontloaderplugin will be installed before preload(), but not added to loader yet
            // Call addToScene(scene) to add this await loader to loader of this scene
            this.plugins.get('rexwebfontloaderplugin').addToScene(this);
    
            this.load.rexWebFont(config);
        }
    }
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import WebfontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexWebfontLoader',
                plugin: WebfontLoaderPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • In preload stage
    scene.load.rexWebFont(config);
    

Load webfont

In preload stage:

this.load.rexWebFont({
    google: {
        families: ['Bangers']
    },
    // testString: undefined,
    // testInterval: 20,
});
  • testString : To test if the font is loaded completed or not.
    • undefined : No testing. Default value.
    • A string : A test string for all fonts
    • An object, {fontFamily: testString} : Test string for a specific font family.
  • testInterval : Retry interval.

or load font in pack

var sceneConfig = {
    key: '...',
    pack: {
        files: [{
                type: 'rexWebFont',
                key: 'webfont',
                config: {
                    google: {
                        families: ['Bangers']
                    },
                    // testString: undefined,
                    // testInterval: 20,
                }
            }
        ]
    }
};

Configuration of loading fonts

  • Google webfont
    WebFontConfig = {
        google: {
            families: ['Droid Sans', 'Droid Serif:bold']
        }
    };
    
  • Custom font
    WebFontConfig = {
        custom: {
            families: ['My Font', 'My Other Font:n4,i4,n7'],
            urls: ['/fonts.css']
        }
    };
    
    and fonts.css
    @font-face {
        font-family: 'My Font';
        src: ...;
    }
    @font-face {
        font-family: 'My Other Font';
        font-style: normal;
        font-weight: normal; /* or 400 */
        src: ...;
    }
    @font-face {
        font-family: 'My Other Font';
        font-style: italic;
        font-weight: normal; /* or 400 */
        src: ...;
    }
    @font-face {
        font-family: 'My Other Font';
        font-style: normal;
        font-weight: bold; /* or 700 */
        src: ...;
    }
    

Events

  • fontactive event

    this.load.on('webfontactive', function(fileObj, familyName){});
    
  • fontinactive event

    this.load.on('webfontinactive', function(fileObj, familyName){});
    

Test string

Add string parameter testString into config, to test if the font is loaded completed or not.

  1. Fill 0 within an internal canvas.
  2. Draw testString.
  3. Check if any pixel has non-zero value.