WebGL + Chrome = broken webfonts?

I just noticed old Arcade games still seem to show Web Fonts properly, but the latest builds don't. This suggests we broke it somehow. Does anyone know exactly which release first broke it? It would help track down the change that broke it.

I had r99 on a machine I don't use often, and it worked. I skipped ahead to r102 thinking the font problem would be more recent, but blew it, as r102 didn't work.

edit: Ashley

Ashley

I seem to have run into this as well, here is the project it appeared in: Problem project

Seems that allowing the security stuff in chrome does load the fonts, posted about it in the thread I linked.

The latest builds of C2 are showing webfonts again for me - are you using the latest Chrome? Might have been a Chrome bug they quickly fixed.

The latest builds of C2 are showing webfonts again for me - are you using the latest Chrome? Might have been a Chrome bug they quickly fixed.

Ashley

I tested on 2 different computers, both running latest chrome update. this is what happens:

The font does not load, untill

Here is the wrong font:

<img src="https://dl.dropbox.com/u/19921470/ab_bad_font.PNG" border="0" />

Here is what appears after I press that little shield icon at top right:

<img src="https://dl.dropbox.com/u/19921470/ab_good_font.PNG" border="0" />

Perhaps this is some security setting I've enabled, but pressing this shield icon fixes it:

<img src="http://www.sheffield.ac.uk/polopoly_fs/1.255150!/image/uPlayerChrome_1.jpg" border="0" />

vee41: I've noticed that icon if you are accessing your game through HTTPS and using external webfonts. Clicking that icon and giving Chrome access to the files seems to fix it (this was related to the weird localhost fix on the previous page I posted at squidster). However it doesn't seem to fix the fonts when they are local webfont files.

Edit: Forgot to mention, if you are sharing your link and you don't want people to have to click the shield icon to allow external files, send them the HTTP (not HTTPS) link. HTTPS will block any files that do not originate from the page/domain you are on, which is the case when using external webfonts.

Ashley: The latest version of Chrome me but still noticing the problem. However, I went back and tried out what Paradox said and installed R99. In R99 I can confirm webfonts are working fine with WebGL turned on in Chrome. It seems that with R100 there is a large amount of new code in the runtime.js for shader support and that's when webfonts break.

Could something in R100 be the source of the problems? Or is R100 just making use of a feature that is bringing a bug in Chrome to light?

I've noticed that icon if you are accessing your game through HTTPS and using external webfonts. Clicking that icon and giving Chrome access to the files seems to fix it (this was related to the weird localhost fix on the previous page I posted at squidster). However it doesn't seem to fix the fonts when they are local webfont files.

boolean, that's it in my case, thank you! :)

It's difficult to track down issues from such old versions, because rolling back the code that far is difficult or breaks so many things it becomes impossible to test the original issue. We only officially support web-hosted Google Fonts which seem to be working OK at least. Am I right that only local web fonts have a problem? Can someone make a bare-bones capx to help testing?

The main change to Text in r100 was text is now rendered to a canvas which is then converted to a WebGL texture, rather than rendered to a canvas floating on top of the WebGL canvas. In theory this should not change rendering at all because the text is rendered to a canvas both ways, it's just the canvas which is treated differently after that rendering is done. It may be some complicated bug in the interaction between text rendering on a canvas and WebGL, but that would be difficult to reproduce in a minimal test case that browser vendors would require, because generally a lot of code is necessary to get even a simple WebGL view rendering in a similar way to what Construct 2 does. The fact it works in Firefox further suggests it's a Chrome bug. Can someone check if it works in Chrome with WebGL disabled?

Am I right that only local web fonts have a problem?

After the testing so far in this thread, it seems so.

Can someone make a bare-bones capx to help testing?

My original post has a link to the capx I've been using for tests. Here is the link to the capx. It's a demo created by lemo a while back so that it could be verified that it's setup correctly.

The fact it works in Firefox further suggests it's a Chrome bug.

I should point out that this thread isn't supposed to point fingers at C2 - It's entirely possible that this is a bug in Chrome. This thread shouldn't be seen as us pestering you to fix it as much as trying to determine where the bug is coming from and, if it is Chrome, what is causing it. The switch from R99 to R100 seemed to break something, but what it was, be it in C2 or Chrome, is the million dollar question.

Can someone check if it works in Chrome with WebGL disabled?

Webfonts, local and external, all work in the versions I tested with WebGL disabled.

I'm not sure if this is helpful or not, but I couldn't get the webfont to work in chrome so I just added a "preloader" (text box with the webfont set and some text in it, out of view) and then in the next layout (where I wanted it to work) it loads fine. Never had a problem with FF or IE, just Chrome being stubborn?

Also hitting F12 on chrome to bring up the developer tools would make the webfont appear also.

I just started work on the game I had set aside back then, and the font problem still affected it on it's first layout.

I worked around the problem by loading the font to one of the textboxes first thing in the startup event.

at the end of the startup, I put in a "wait 0.1" and then loaded the font again for the family of all the text boxes.

Apparently if the text boxes get set before the font is cached, it never switches to it. (it shows a generic serif font instead.)

You can see a flash of the wrong font, but it does that anyway when it is working correctly. It is a Google font. (Oregano)

Yes I also still have issues with Web Fonts when using WebGL, and I still get that flash of the wrong font even when embedding the webfont in my capx.

Fonts are the one thing I find really frusting about Construct2, I would really like a way to just embed my own font and have it work, or perhaps a built-in and robust SpriteFont plugin. I think a trigger for 'On Web Font Loaded' would be useful too

SecondDimension

Not sure if this will help, but I'm currently experimenting with Webfonts myself at the moment. To get rid of the annoying flash of the wrong font even after webfont has been set, I set the font to size 0 whilst being visible, then put in a wait of half a second and then set the font to the size I require (so it still acts as being invisible until the font is resized). This seems to stop the change between fonts showing on most occasions (and if it doesn't work, try a longer wait).

Hope this works for you. If not, I still have more experimentation to do and will be happy to let you know if I find something that works better.

Also load the webfont during a loading layout, that way it's already downloaded and cached by the time you come upon elements that would need it in game.

I seem to have good luck forcing the webfont via:

On start of layout

Set text Web Font to FONT at FONT.CSS

Set text Invisible

Wait 0.01 seconds

Set text Visible

Doing this to a textbox on your loader screen should have the text appear almost instantly with the webfont and have the font ready for the rest of the game.

You don't even have to have the textbox visible to the user, just do it on the loading layout before switching to the title.

Dave Hailwood, Thndr, thanks for the tips. I'll give it another go and see if I can get it working a bit smoother