Custom font TTF override for html5 composite?

1

I’m making a haxeui-HTML5 (composite backend) tool. I’d like to override the default font in the “dark” theme with a different TTF. I don’t want to have to create a whole other theme – I just want to change the font face. How would I do this?

I know there’s a bunch of stuff I have to do with adding something to module.xml, and then adding a style rule somewhere? But I’ve tried a bunch of different combinations of this, without much progress. And I have to use “font-name”, not “font-family”?

2

Hi

So, this is probably the easiest (and cross framework way):

  • create a module.xml somewhere on your class path (eg: src)
<module preload="all">
    <resources>
        <resource path="assets/fonts" prefix="fonts" />
    </resources>
</module>

(preload=all isnt mandatory, but it will mean the font will be preloaded at the beginning making, imo, usages of it seem faster - same goes with images imo)

  • Use that in a style:
<vbox style="padding: 5px;">
    <style>
        .label {
            font-name:  "fonts/Melted Monster.ttf";
            font-size: 48px;
            color: #03038a;
        }
        
        .button {
            font-family: "fonts/Melted Monster.ttf";
            font-size: 48px;
            color: #8a0303;
        }
    </style>
    
    <label text="Some Label" />
    <button text="Melted Monster" />
</vbox>

image

(both font-family and font-name should be valid - at least in git versions not sure about haxelib version as its pretty substantially behind)

FYI: you could also load it in the containing .html file and then use it by name in haxeui css - if its available to the html, it’ll be available to haxeui - however, i think the module route is much cleaner and simpler (plus it’ll work on all backends :wink: )

Cheers,
Ian

1 Like
3

yeah, I was trying to do it via .html + css override, and it was definitely breaking everything and it felt terrible to use… the module XML way is much better, and it makes a lot of sense now, thanks!

1 Like