Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blotter still doesn't work with custom fonts #61

Open
lunule opened this issue Jun 14, 2021 · 2 comments
Open

Blotter still doesn't work with custom fonts #61

lunule opened this issue Jun 14, 2021 · 2 comments

Comments

@lunule
Copy link

lunule commented Jun 14, 2021

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
Copy link

locksy commented Mar 29, 2022

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
Copy link

locksy commented Mar 29, 2022

also, I included

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants