bradley/Blotter

Blotter still doesn't work with custom fonts

lunule opened this issue · 2 comments

Hi,

Thanks for the awesome plugin - the only issue I have is with custom fonts such as Google Fonts.

I followed your example mentioned here, but it doesn't seem working.
The strangest thing is that sometimes it works, then next time (refresh) it doesn't. The working example is here:
https://twirling.space/playground/uiscape/treejs/blotter/ - Blotter still displays a serif font, but the family property is set to "'Roboto Mono'" in the text options. The init is within a document.fonts.ready callback, and the Google Fonts scripts/styles also seem to be called correctly.

Also - while you expressed clearly that you don't intend to improve Blotter's custom font handling, I'm a little bit lost here.
Blotter is all about display, style, and modern typo effects - it seems to me that if custom fonts are not fully and reliably supported, it kinda questions the purpose of the script.

What do you think?
Thanks for taking a look into this.

Forgive me if I've completely missed somthing, I'm a relative n00b, but I seem to have gotten custom fonts to work like this:

const text = new Blotter.Text(textEl.innerHTML, {
family : "'Righteous', 'url(Righteous-Regular.ttf)",
weight: 900,
size : 200,
fill : 'black'

    });

And then I just keep the font file in the same directory. Again, I'm a n00b so if there is something I've missed here please let me know. In any case, I hope this helped!

also, I included

WebFont.load({
google: {
families: ['Righteous']
},
active: () => createBlotterText()
});