WebGL + Chrome = broken webfonts?

0 favourites
  • I'm not really sure why this would be a problem, but it would seem that enabling WebGL in C2 breaks webfonts in Chrome <img src="smileys/smiley5.gif" border="0" align="middle">

    I tried running the sample capx from this thread by lemo. The sample capx from that thread is: Capx

    If I run the capx in Chrome (version 25) with WebGL enabled, the webfont never loads. If I disable WebGL it works fine.

    Any idea why this would be happening? I'm not sure if this is a driver thing, a chrome thing or a construct thing. Does anyone else experience this issue? Any ideas what could be causing it?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • It loaded for me, Chrome Version 25.0.1364.97 m.

    Arial in the editor, the serif font in Chrome.

  • It happens for me too! works fine with webGL off.

    Paradox, the serif font isn't what he's setting! Turn off webGL and you will see.

    That's why my webfonts haven't been working correctly!

    Ashley I'd suggest we move this to bugs?

  • It looks like a Chrome bug. It works fine with WebGL on in Firefox Nightly. Also in WebGL mode the text object actually uses the same canvas 2D drawing function, and then copies the canvas to the WebGL view. So our code is even more or less identical in both renderers. I'll try repro it and report to Google.

  • I can't find a way to reproduce it from scratch (without C2's engine). No idea what's going on here, but it does seem to be a Chrome bug; you could try reporting it to Google anyway, but they might just ask for a simpler repro...

  • Hmm... If it can't be reproduced from scratch, wouldn't this indicate a C2 bug? I'd just hate for a bug this significant to go ignored as it affects basically all projects.

  • I've been poking around the internet and I can't seem to dig up any info on this <img src="smileys/smiley12.gif" border="0" align="middle">

    The closest I could find was a bug ticket for GameMaker. The admin responded by saying that the fonts have to be fully loaded before WebGL kicks in. I tried playing about with the runtime.js file to simulate this but there's just a bit too much code to shuffle around. Could this be anything even close to what might be causing it in C2?

    One other note: Webfonts with WebGL do seem to work in other games in Chrome. Example. In all the WebGL enabled HTML5 demos I could find that use webfonts, Chrome seems to load the fonts fine.

  • If it works in one browser (Firefox) but not another (Chrome) generally it's an indication our code is correct because it works in one browser. But it could be an accidental reliance on something non-standards compliant...

  • sqiddster

    I might have figured out what the problem is. Can you do a quick test?

    1) Run the font .capx I linked to in preview mode with WebGL enabled.

    2) Change "localhost:5000" to "http://localhost:5000".

    Do the webfonts suddenly work for you then?

    Edit - Curious, this works if you have WebGL turned on and you are loading the font from an external source. I changed mine to point to a google font and the trick above allows it to work. However it's still not allowing local fonts to load.

  • Interesting - not working for me though, changing to http makes it act strangely and default back. Then it starts going to 50000 and 50001 :P

  • Ashley sqiddster

    So I found a way around this, at least for published versions. Try publishing the capx above and then before the closing head tag (in index.html) add:

    <script>

        WebFontConfig = {

          custom: { families: ['Conv_VAGRundschriftD'],

          urls: ['fonts.css']

        }

    };

    (function() {

    var wf = document.createElement('script');

    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +   

    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

    wf.type = 'text/javascript';

    wf.async = 'true';

    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(wf, s);

    })();

    </script>

    This seems to force the font to load and all works fine. However, while that works for published games it doesn't help during preview mode (just because it's not as easy to edit the files).

    Test page using this technique

    Using the above code (with the "families" property changed to my own font family) I was able to publish my game and get it running. It still doesn't really answer why it's not working in the first place though. What technique is C2 using to load webfonts at the moment?

  • Works for me.

  • What made me think it was working was that i have a game that worked. However, returning to the game, it doesn't work in Chrome anymore, for the first layout, (title screen) but it does work when it reloaded the font for the second layout. (level 1)

    Edit:

    Here, I used the example and made a second layout, when you click, it switches to layer 2 and you can see the font switches to the proper one.

    https://dl.dropbox.com/u/85412219/forumposts/chromefontlayer2.capx

    Would this offer a lead to solving Ashley? (@sqiddster)

  • Paradox : Oh weird that actually works!

    I would be curious to know when switching layouts if C2 restarts WebGL - If so it might point towards the theory that the webfonts are not loading fully before it kicks in.

    Ashley: Any thoughts on this? We have two workarounds now. Any thoughts on where the problem might be originating?

  • I edited the example to jump back to layer 1 on another click, and 1 works after it loads for 2.

    I just noticed I have another game that has the font not showing in one text box, but is showing in another right under the first.

    However I haven't gotten it to repeat that in the example. (it's a complicated setup, with included event sheets, font names stored in Variables, and lots of other setups before the second text is written in a function...)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)