Canvatorium Lab 052

Working with custom fonts in Babylon JS GUI.

Working with fonts in Babylon JS takes a bit of work. I couldn’t just import the font directly in a Vue component and use it on a Text Block.

I had to register the fonts in CSS

@font-face {
  font-family: "NotoSans-Medium";
  src: url("/assets/fonts/NotoSans-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

To get the browser to download the file, I also had to use the font on some HTML somewhere in the page.

<p style="font-family: 'NotoSans-Medium', sans-serif">Loading font NotoSans-Medium</p>

That was enough to get the browser to download the font. I could then use it in a Text Block or other 2D GUI.

const paragraph = new TextBlock();
paragraph.fontFamily = "NotoSans-Medium";

I’m using a Nuxt Template for all Lab Pages in the radical-canvatorium of this project, so I added a hack here to trick the browser into downloading all the fonts I want to use for the labs.

      <div style="opacity: 0; z-index: -100">
          <p style="font-family: 'NotoSans-Medium', sans-serif">Loading font NotoSans-Medium</p>
          <p style="font-family: 'NotoSans-MediumItalic', sans-serif">Loading font NotoSans-MediumItalic</p>

          <p style="font-family: 'NotoSans-SemiBold', sans-serif">Loading font NotoSans-SemiBold</p>
          <p style="font-family: 'NotoSans-SemiBoldItalic', sans-serif">Loading font NotoSans-SemiBoldItalic</p>

          <p style="font-family: 'NotoSans-Bold', sans-serif">Loading font NotoSans-Bold</p>
          <p style="font-family: 'NotoSans-BoldItalic', sans-serif">Loading font NotoSans-BoldItalic</p>
      </div>

In the top card in this lab uses NotoSans-Bold for the title and NotoSans-Medium for the text. The bottom card uses the default font for GUI in Babylon JS.