Blotter icon indicating copy to clipboard operation
Blotter copied to clipboard

Blotter still doesn't work with custom fonts

Open lunule opened this issue 3 years ago • 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.

lunule avatar Jun 14 '21 09:06 lunule

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!

locksy avatar Mar 29 '22 03:03 locksy

also, I included

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

locksy avatar Mar 29 '22 04:03 locksy