HTML5 loading font at runtime

Hej all,
I’ve googled but have’nt found a good answer at my question.
I want to load a font at runtime and use it in a textfield targeting HTML5.
I know I can add this font to my assets, and I can also achieve what i want to do doing it by hand but I wonder if there is an elegant way doing it with openfl at runtime, maybe Font.fromBytes, Font.register ?
Any advice is welcome,
Thanks in advance,

You need to add CSS styles in order for Webfonts to be defined at runtime. I assume there are tools online for loading webfonts spontaneously, if it isn’t too complicated, perhaps we could try and help integrate this?

We have Font.loadFromName that works for webfonts, but that only helps us know when the CSS style is valid… it does not define the CSS to start with. Happy to hear any new information on this :slight_smile:


So i recently hit this exact same issue (found this post googling for a solution), where i wanted to load a font dynamically from haxe bytes and thought (assumed) Font.fromBytes would work, just found out that wasnt the case for html5. So stripped out some code from haxeui-html5 that does just that and plugged it into haxeui-openfl, all seems to work just fine. Its not particularly "haxeui"y so i thought i would add it here in case it might help someone, or if it would be useful to put somewhere into openfl (its not sync though so Font.fromBytes wouldnt be the place).

The commit is here:

(ignore the StyleSheetHelper.hx, committed by mistake).

And the proof of the pudding (openfl html5 + openfl native):



All fonts are haxe.Resource bytes.

Hope it helps someone!




If anyone would like to help, I think that lime.text.Font.loadFromBytes could be the best place.

On HTML5 we already have Font.loadFromName to load HTML5 fonts asynchronously if they are already registered with CSS, however loading from bytes on HTML5 is not implemented.

It might be able to combine the logic here with some of what we already have in place for loadFromName

Anyone interested in helping?

1 Like