replace2CanvasFont.js

var Replace2CanvasFont = pc.createScript('replace2canvasFont');

// initialize code called once per entity
Replace2CanvasFont.prototype.initialize = function() {
  this.app.root.findComponents('element').forEach(function(elm){
    if(elm.type === 'text') {
      var font = new pc.CanvasFont(pc.app, {
        fontName: 'UD Digi Kyokasho N-R, Helvetica, arial, sans-serif',
        fontSize: 128,
      });
      font.createTextures(elm.text);
      elm.font = font;
    }
  });
};

withGoogleFonts.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
const Replace2CanvasFont = pc.createScript('replace2canvasFont');

Replace2CanvasFont.attributes.add('fonts', {
  type: 'string',
  array: true,
  default: ['https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap']
});

// initialize code called once per entity
Replace2CanvasFont.prototype.initialize = function() {
  if(this.fonts.length) {
    const style = document.createElement('style');
    const fontnames = this.fonts.map(fonturl => new URL(fonturl).searchParams.get('family').split(':')[0])
    const fonturls = this.fonts.map(fonturl => '@import url(' + fonturl + ');')
    style.innerHTML = fonturls.join('\n')
    style.onload = () => document.fonts.load('12px ' + fontnames.join(', ')).then(fontFaces => {
      const families = fontFaces.map(fontFace => fontFace.family)
      this.replace(families)
    })
    document.body.appendChild(style)
  } else {
    this.replace()
  }
};

Replace2CanvasFont.prototype.replace = function(families = []) {
  this.app.root.findComponents('element').forEach(elm => {
    if(elm.type === 'text') {
      var font = new pc.CanvasFont(pc.app, {
        fontName: [...families, 'arial', 'sans-serif'].join(', '),
        fontSize: 128,
      });
      font.createTextures(elm.text);
      elm.font = font;
    }
  })
}

class FontManager extends pc.ScriptType {
    get textElements() {
        const elements = this.app.root.findComponents("element");
        return elements || elements.map((element) => element.type === "text");
    }

    _canvasFontInit() {
        const chars = [];
        for (let element of this.textElements) {
            chars.push(element.text);
        }
        this._createTexture(chars.toString());
    }

    _createTexture(chars) {
        if (this.app.canvasFont) {
            this.app.canvasFont.destroy();
        }
        this.app.canvasFont = new pc.CanvasFont(pc.app, this.options);
        this.app.canvasFont.createTextures(chars);
        for (let element of this.textElements) {
            element.font = this.app.canvasFont;
        }
    }
    _setText(element, char) {
        if (this.app.canvasFont) {
            this.app.canvasFont.updateTextures(char);
            element.text = char;
        }
    }

    initialize() {
        this.app.canvasFont = null;
        this.options = {
            fontName: "Meiryo Arial Helvetica",
            fontSize: 128,
        };

        this.app.on("text:set", this._setText, this);
        this.on("attr", this._canvasFontInit, this);

        this._canvasFontInit();
    }
}

pc.registerScript(FontManager);

const EmojiRandom = pc.createScript('emojiRandom');

// initialize code called once per entity
EmojiRandom.prototype.initialize = function () {
    setInterval(() => {
        const emojiCode = Math.floor(Math.random() * (129685 - 129660 + 1) + 129660);
        const emoji = String.fromCodePoint(emojiCode)
        this.app.fire("text:set", this.entity.element, emoji)
    }, 200);
};