FlashyGoblin Posted July 21, 2016 Share Posted July 21, 2016 Is there a way for the Text2D primitive in Canvas2D to load Google Web Fonts? Or any custom font for that matter. It seems to use it only when the font is loaded on your local system. It doesn't use the font that the page loads from Google. Thanks! Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 22, 2016 Share Posted July 22, 2016 Hiya @FlashyGoblin, good to see you, as always. And, you ask some darned difficult (but good) questions! How much research have you done, on this? https://github.com/typekit/webfontloader One of the issues I've seen... is that when a LINK is used to order-in some webfonts... <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> ...the actual fonts are not "loaded". (Example above.... found here). Not until the browser needs to USE that font... do they load-in. By this time, the text2D is already displayed. So, webfontloader has some delays and timeouts... and so, it can be sure that the fonts are fully loaded, before anything else happens. The theory... is that once you get the font loaded... you can use it BY NAME... in an unmodified text2D primitive. I'm not promising anything, but... just maybe... it is that simple. Somehow wait until the font map is available to the browser... loaded... and then it can be used just like any other font. Ok, that's all I know, so far. Thoughts? Hopefully, some experts (such as currently-taking-a-well-deserved-break @Nockawa)... will visit and comment. But, now you also have some things to try, right Flashy? We have playgrounds that load-in external JS scripts, and you can document.head.appendChild <LINK> elements as well. I'd say, step #1... use webfontloader to retrieve the font map/font texture you want. Then try to use it on a dynamicTexture.drawText() and see if you can get your web font working that way. Then... you know... take the big step... and try a for-sure-browser-loaded web font... on a text2D. I think it can be done. Thoughts? Playgrounds? I'm all ears. What a great question... you have asked. Phew. Big, juicy one. heh adam 1 Quote Link to comment Share on other sites More sharing options...
adam Posted July 22, 2016 Share Posted July 22, 2016 http://babylonjs-playground.com/#2AVSFH#74 http://babylonjs-playground.com/#2AVSFH#75 I couldn't figure out how to get WebFontLoader to work in the PG so I went with FontFaceObserver. https://github.com/bramstein/fontfaceobserver jerome, Wingnut and FlashyGoblin 3 Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 22, 2016 Author Share Posted July 22, 2016 13 minutes ago, adam said: http://babylonjs-playground.com/#2AVSFH#70 Whoa! I was just about to respond to this thread with all of my research and past tests, when @adam swoops in like a BOSS and totally owns it!! That seems to work great!!!! I will try to implement that into my project and let you know my results. Thanks man!!! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.