Draw text with css effects

Questions
21

A cool trick is to create a div using that font with width set to 0.01 and wait for onload on the body element

22

Apologies for reviving an old thread but this is the only one I could find that captures the history of this issue. I am using dynamicTexture.drawText() to properly render system fonts on BabylonJS planes. It works like a charm. However, I cannot properly render a custom font .ttf using the same functionality. I can properly define and use the custom font in the css with the following:

<style type="text/css">
        @font-face { font-family: 'HelveticaNeueBold'; src: url('../images/HELVNB.ttf'); }    
        h1 {
         font-family: HelveticaNeueBold
        } 
    </style>

    
    <div class="myDiv">
        <h1>Test Text</h2>
    </div>

However, when attempting to supply the font name ‘HelveticaNeueBold’ to drawText() the page defaults back to what appears to be Times New Roman. Preloading does not have any effect.

Does anyone have any further information on making this work? thanks

23

Update: I can confirm I am also just having a loading issue. If I refresh the font assignment after the page is loaded, I am able to assign the custom font. I will just add a delay to the original load until all custom fonts are available.

24

There is a programmatic way as well to update your texture to use the font once it is loaded. ie:

if (document.fonts.check("16px FontAwesome") === false) {
    document.fonts.load("16px FontAwesome").then(() => {
      advancedDynamicTextureRef.markAsDirty();
    });
  }

working example here. I use the “X” as a close icon and then when FontAwesome loads the GUI will update automatically.
create-react-app-typescript-babylonjs/App.tsx at master · brianzinn/create-react-app-typescript-babylonjs (github.com)

1 Like
25

Thanks, I will look into that. In the meantime, I got this to work

First I declare the fonts and use them in a div

    <style type="text/css">
        @font-face { font-family: 'HelveticaNeueBold'; src: url('../images/Fonts/HELVNB.ttf'); }    
        @font-face { font-family: 'Noto Sans U'; src: url('../images/Fonts/NotoSansUI-Bold.ttf'); }  
        @font-face { font-family: 'Bookman'; src: url('../images/Fonts/Bookman Bold.ttf'); }    
        @font-face { font-family: 'FrnkGothITLBkBT'; src: url('../images/Fonts/FRKGOTD.ttf'); }    
        @font-face { font-family: 'ArialBD'; src: url('../images/Fonts/arialbd.ttf'); }    
        h2 {font-family: HelveticaNeueBold} 
        h3 {font-family: Noto Sans U} 
        h4 {font-family: Bookman} 
        h5 {font-family: FrnkGothITLBkBT} 
        h6 {font-family: ArialBD} 
    </style>

    <div class="myDiv">
        <h2>HelveticaNeueBold Font</h2>
        <h3>Noto Sans U Font</h3>
        <h4>Bookman Font</h4>
        <h5>FrnkGothITLBkBT Font</h5>
        <h6>ArialBD Font</h6>
    </div>

Then I wrap the dynamic text creation and update in

document.fonts.onloadingdone = () =>{}

this properly displays the custom fonts in any dynamic texture that uses them, but has the drawback of placing elements above my canvas.

2 Likes
26

This did the trick :

   <style type="text/css">
        @font-face { font-family: 'HelveticaNeueBold'; src: url('../images/Fonts/HELVNB.ttf'); }    
        @font-face { font-family: 'Noto Sans U'; src: url('../images/Fonts/NotoSansUI-Bold.ttf'); }  
        @font-face { font-family: 'Bookman'; src: url('../images/Fonts/Bookman Bold.ttf'); }    
        @font-face { font-family: 'FrnkGothITLBkBT'; src: url('../images/Fonts/FRKGOTD.ttf'); }    
        @font-face { font-family: 'ArialBD'; src: url('../images/Fonts/arialbd.ttf'); }    
        h2 {font-family: HelveticaNeueBold} 
        h3 {font-family: Noto Sans U} 
        h4 {font-family: Bookman} 
        h5 {font-family: FrnkGothITLBkBT} 
        h6 {font-family: ArialBD} 
    </style>

    <div style="visibility: hidden; height:0; width:0;">
        <h2>HelveticaNeueBold Font</h2>
        <h3>Noto Sans U Font</h3>
        <h4>Bookman Font</h4>
        <h5>FrnkGothITLBkBT Font</h5>
        <h6>ArialBD Font</h6>
    </div>

continue to use

document.fonts.onloadingdone = () =>{ // create your textures here}