phaser3-webfont-loader
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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
    });

    Keywords

    none

    Install

    npm i phaser3-webfont-loader

    DownloadsWeekly Downloads

    19

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    19.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • cloakedninjas