CODEWITHSUNDEEP
javascriptcanvaswebglphaser-framework
Lars Flieger
Lars Flieger

Reputation: 2534

Can I set the font width of a font in Phaser 3?

I am using Phaser 3 to develop a browser game in a canvas with WebGL. I set the width of the canvas text from a custom loaded font, but I cannot set it's style (e.g., italic, semibold).

Here is the code that I use to create text:

this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins'
})
this.add.text(100, 600, 'Test Text', {
  font: '50px Poppins semibold'
})

Here is the output:

enter image description here

The second image is using the default font, not Poppins. It seems that as soon as I try to set italic or any other style it will fallback to the default font.

I tried to set it with the properties as well (no luck). Has anyone faced the same issue (styling custom fonts), and how to properly load the styled custom fonts?

Upvotes: 0

Views: 2723

Answers (2)

Lars Flieger
Lars Flieger

Reputation: 2534

The problem was related to the async loading of the fonts from google. With webfontloader from google I can wait with the active event till they are ready.

import WebFont = require('webfontloader')

export class BootScene extends Phaser.Scene {
  private ready: boolean = false
  constructor() {
    super({
      key: 'BootScene'
    })
  }
  async preload(): Promise < any > {
    WebFont.load({
      google: {
        families: ['Poppins:600i,600,400', 'Inconsolata']
      },
      active: () => {
        // This is required for asnyc loading
        this.ready = true
      }
    })
  }
  // Launch game when all assets are loaded
  update(): void {
    if (this.load.isReady() && this.ready) {
      this.scene.start('MainMenuScene')
    }
  }
}

Upvotes: 0

User863
User863

Reputation: 20039

Issue:

semibold is not a valid font-weight. so it will be considered as font.

enter image description here

Solution:

enter image description here

this.add.text(100, 600, 'Test Text', {
  font: '600 50px Poppins' // 600 equivalent to Semi Bold
})

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Upvotes: 2

Related Questions