Loading external fonts (.ttf)

Help & Support
#1

Hi all,

Is it possible to load external fonts? More specific, .ttf fonts?

With the standard loadFromUrl function I successfully use for other external assets I get an error when I try to load an .ttf file.

this.app.assets.loadFromUrl(`https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE6VhLPJp6qGI.ttf`, "font", function (err, asset) {
        if (err) {
            console.log(err);
        } else {
            console.log(asset);
        }
    }.bind(this));

image
image851×240 102 KB

How does one load an external font file and convert it to a usable asset for PlayCanvas?

#2

Font asset in PlayCanvas doesn’t use TTF directly. When importing into PlayCanvas Editor, they get converted to a signed distance font map (GitHub - playcanvas/msdfgen: Multi-channel signed distance field generator)

There are two options here:

  • Use Canvas Font which is currently private API until we can get time to focus on it to be make it suitable for general use. You can see an example from the engine here: https://playcanvas.github.io/#/user-interface/text-emojis. An Editor example can be found here: https://playcanvas.com/project/702920/overview/canvas-font-example

  • Use the Editor to generate the font map and download the asset to store on an external server where you need it so that it can be loaded at runtime. It will come in two parts, a JSON and a PNG. You will load the JSON for the font asset and as long as the font PNG is in the same folder, it should also load with it.