Web-font is glitched with certain numbers

0 favourites
  • 4 posts
From the Asset Store
Minimal Sprite Font with Stroke for Pixel Art games.
  • Hello!

    I'm not sure what's causing this but, I downloaded a font from Google Fonts called "Gochi Hand". In my game, I load it with the "set webfont" action on a textbox.

    This works fine, however, the number '2' is glitchy and renders at different thickness throughout. I attached a simple construct 2 project file below anyone who wants to can try out in their browser and see how the 2 "dances" when re-sizing the browser as it changes width for example.

    https://drive.google.com/file/d/1itlg_EZ3gNGX-f-8jOxJjult9EQpxJCt/view?usp=sharing

    Is there any fix to this?

    Tagged:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I imported it to Construct3 and it looks fine there... plus web fonts are much easier to work with in C3. Don't know why C2 doesn't render it correctly, but I suspect there isn't much you can do about it.

  • AllanR Thanks for checking it. As far as I know, C3 adds text differently than C2 by adding it as an element inside the game Canvas, while C2 adds it as a form element above the Canvas, separated from it. That would explain the different results. Scratch that, that only goes for textbox, lists etc. not plain text. It seems to be the same for both C3 and C2. Not sure why it behaves differently then.

    I'm wondering if there's any specific font css I can add in the stylesheet for the font to make it look correct in C2 that may be specific to Chromium/Chrome. Or maybe there's something wrong with the font itself when it comes to displaying in browser and nw.js apps.

    EDIT:

    Here's some screenshots depicting the problem. First image is C2 rendering the font with the weird '2', and second image is the font shown correctly in Illustrator.

  • Here's a .gif demonstrating the issue as well when I'm resizing the browser. This happens in both Chrome, Firefox as well as nw.js. I'm using the latest Construct 2 release 279.

    imgur.com/a/bPnaPAa

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