[SOLVED] Using custom font in PlayCanvas.js without editor

Hi everone,
I’m using playcanvas.js from github without editor. How can i use custom font?
I’m already try msdfgen but generated json it not compotible playcanvas.

Hi @umut and welcome,

There is this engine example that uses a canvas font and showcases how to render the required atlases:

1 Like

Have you tried this one? https://github.com/playcanvas/msdfgen

You could also most likely create the font asset in the editor, and download it for the use in the engine. Editor is free to use, so perhaps that’s an easy way?

1 Like

A couple of example fonts used by the engine-only examples are here:

To generate those, just do:

Easy! :smiley:


Thank you for all answers.
@ Will I can’t use it because it is editor dependent. I need to create font asset in runtime or build time
@mvaligursky Also thank you for your answer. I try it, it is generating good font atlas but playcanvas need a json data make it work. I can’t make it. I try combination of msdfgen’s asset and fontbm’s fnt data. it was worked but little buggy.
@Leonidas Thank you for your answer. It is worked after little modification in source code. Now i can generate font asset at runtime with base64 encoded font.


If you process the font in the Editor, you can download the asset that gives you both the JSON and the texture to load with the engine only.

1 Like

@yaustar Thank you for your answer but as I say my previous answer I cant use the editor in my current project.

@Leonidas 's answer exactly what i need

1 Like

Not even just to convert assets with? Once the assets is downloaded from the Editor, you don’t need the Editor anymore.

Regardless, we (PlayCanvas) should consider documenting how to make the fonts offline :thinking:

OK, little leak what I try to do with this :slight_smile:
I’m developing a unity extension which compile unity project as a PlayCanvas html5 project.
Currently status nearly perfect for 2d and ui (with this font implementation).
I’m improving 3D things.


Ooooooh, that makes more sense.

1 Like