Phaser3 Custom Font

Phaser 3
1

Hi,

I’m using Phaser3 with WebPack and I’m trying write with custom font with this.add.text().

  1. Add CSS style @font-face for loading custom font
@font-face {
   font-family: "Pixel Operator 8";
   src: 
      url("fonts/pixel-operator-8.woff2") format("woff2"), 
      url("fonts/pixel-operator-8.woff") format("woff"),
      url("fonts/pixel-operator-8.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

  1. Import CSS from JS with import "./assets/styles.css" (with css-loader & style-loader with webpack).

  2. Try write in Phaser3:

  [...]
  create() {
    this.make.text({
      x: 40,
      y: 440,
      text: "This is a example",
      style: {
        font: "18px 'Pixel Operator 8'",
        color: "#ffffff"
      }
    });
  }

If I write a <span></span> with text in my index.html, appears correctly (I understand that custom font is loaded OK), but in Phaser3 appears with normal font.

Some help?

2

You’ll need to use Google/Typekit’s Web Font Loader, to ensure the fonts are loaded and available in the scene. There’s an example here, with injected CSS, but you could do it your way as well.

3

Finally, I add this steps (without WebFont Loader) and works fine:

  1. Change font-family name without spaces ( PixOperator8 )
  2. Add CSS body { font-family: "PixOperator8"; }
4

In your original post, the url you use . . .

Where exactly is that? is it src/fonts or is it public/fonts or is it somewhere else?

5

@ogrotten Finally, I use:

  • fonts.css in my src folder. In this css file, I link to /assets/fonts/file (woff2 & ttf).
  • fonts.js in my src folder. In this js file, I load webfontloader & export font configs (as said @prob reply)
  • public/assets/fonts with all my fonts (woff & ttf).
  • In my index.js preload with webfontloader.