bradley / Blotter

A JavaScript API for drawing unconventional text effects on the web.
https://blotter.js.org
Other
3.04k stars 209 forks source link

Blotter still doesn't work with custom fonts #61

Open lunule opened 3 years ago

lunule commented 3 years ago

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.

locksy commented 2 years ago

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 commented 2 years ago

also, I included

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