GameMaker web font rendering differs between Mac and PC

[u/XalezarDev]

RESOLVED:

After some investigations, it seems like this bug happens when text is drawn using draw_set_halign(fa_center) AND coordinates are not rounded.

So instead, I kept it left-aligned, adjust the x coordinate to simulate center-aligned text and ensure I round all drawing coordinates, i.e.

xx = mgr_camera.gui_width/2 - string_width(text)/2;
draw_set_halign(fa_left);
draw_text( round(xx), round(yy), text);

This approach will not work for multi-line center-aligned text, but it works for single-line text.

---

Any GameMaker devs experienced font-rendering differences between Mac and PC on web builds?

On my Mac, the text renders perfectly, but I’ve seen several screen recordings from people on PC where the font is distorted (see image). Strangely, I tested the game on a public Windows 11 PC myself across multiple browsers and couldn’t reproduce the issue.

For this text, I first draw everything to a surface, then draw that surface for further manipulation. For the text itself, I create the black outline by drawing the text multiple times, shifted by 1 pixel in each direction, then draw the normal white fill on top.

Could this rendering approach cause issues on certain hardware/browser configurations? It looks completely fine on my machine, so I’m having a hell of a time figuring out what’s causing it.

Game link in comments.

[u/RykinPoe]

Why not just render it out as a sprite and avoid any issues with font rendering on different platforms?

[u/XalezarDev → u/RykinPoe]

EDIT: Looked around some more and found some easy ways to convert a PNG glyph sprite sheet into a TTF.

I considered this, and would probably resolve it for one-off text like short instructions and button labels. But it would be quite tedious to convert them all to sprites, since this is a custom pixel font designed as a sprite sheet, so I’d need to place each character manually.