Blotter
Blotter copied to clipboard
Blotter still doesn't work with custom fonts
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() });