Load text before load game

[Theasker]

I have a code like this:

fonts.css

@font-face{
    font-family: 'LiberationMono';
    src: url('../fonts/LiberationMono-Regular-webfont.eot');
    src: url('../fonts/LiberationMono-Regular-webfont.eot?iefix') format('eot'),
    url('../fonts/LiberationMono-Regular-webfont.woff') format('woff'),
    url('../fonts/LiberationMono-Regular-webfont.ttf') format('truetype'),
    url('../fonts/LiberationMono-Regular-webfont.svg#webfont') format('svg');
}

@font-face {
    font-family: 'archivoblackregular';
    src: url('../fonts/archivoblack-regular-webfont.woff2') format('woff2'),
    url('../fonts/archivoblack-regular-webfont.woff') format('woff'),
    url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
}

fonts = "30pt LiberationMono";
fontTitles = "50pt archivoblackregular";

...

text = this.game.add.text(this.game.world.centerX, 130, "¿What option is the correct?", { 
				font: fontTitles,
				fill: "#005ba6", 
				align: "center" });

text.anchor.set(0.5)

But in the first round does not work.

I have thought to use this as it says in https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/

var fontLoaded = false;
var gameCreated = false;
 
function createText() {
  if (!fontLoaded || !gameCreated) return;
  game.add.text(0, 0, 'Lorem ipsum', {
      font: '12px Amatica SC',
      fill: '#fff'
  });
}
 
function preload() {
  let font = new FontFaceObserver('Amatica SC');
  font.load().then(function () {
    fontLoaded = true;
    createText();
  });
}
 
function create() {
  gameCreated = true;
  createText();
}

But it's a lot of code change, since my games are all with text.

Thanks in advance.

 

 

 

[scheffgames]

Check out my old post about loading fonts in phaser - it explains everything in detail.