Why does text look different when I test the game?

Sorry if this is a silly question, I just started using Construct. I put some text on my layout and thought it looked fine. I then tested it and found that the font looked much less smooth than it did on the layout. Does anyone know why this might be?

Text rendering is actually a pretty complicated subject - most browsers do it differently, and Construct 2 also does it differently to browsers, so the appearance of text is never exactly consistent. Which browser are you using and have you tried any other browsers?

Since browsers aren't consistent amongst themselves (and this is true of many things, not just text rendering) you should test across several browsers and check everything is working OK.

Thanks for the response. I use Firefox and it's the only browser I've tested on. How can I do things differently to make the text look as intended? Would it work better if I just wrote text in paint and then made that a sprite?

What;s wrong with the text in Firefox? Can you show with some screenshots?

Sure. Here's the way text looks in the layout:

tinypic.com/view.php

And here's the way it looks when I test it:

tinypic.com/view.php

You need to click on the images to clearly see that the second one is quite a bit less smooth than the first.

That's the same kind of difference you should expect to see between browsers. I wouldn't use images for text, hopefully it's either not too big an issue or you could also look in to the SpriteFont plugin.

That's unfortunate, when using large text it really is noticeable and just looks wrong. Are there some fonts that display correctly for all browsers? Or are there only some browsers that will display all fonts correctly?

No, as I was saying earlier, even a common font like Arial will probably look different between different browsers (and C2 itself) because they all render text differently. There's no "correct" text rendering system - they all look different but they're not all wrong apart from one - it's just different ways to draw text. So I would argue it just looks different to what you're used to, not "wrong". All fonts will display differently between browsers since they use different text rendering, so I'm afraid this is just something you have to live with.

That's so strange to me. I mean, as a firefox user, I never encounter fonts that look as jaggy as how it looks here. Maybe it truly is just my perception of what it "should" look like, but to me the way the text is coming out really seems like some kind of error.

Only way that i can see to end this problem is rendering text as image, that is sprite fonts. Native text rendering of all browsers currently it's awful. I had no option but make all text of my games as static images. If you want nice smooth gradiented fancy text that's the only way right now. I'm pretty picky with text looks :D

canvas (the html element where all the c2 magic occur) is just an array of pixels on which we draw with js to display the game. The engine to draw in canvas isn't the same as the engine that handle text in your browser. (:

Maybe it's missing ClearType which you get on an ordinary HTML page. I don't know, but it's certainly better than aliased!

Thanks for all the responses. So, what exactly are sprite fonts? Is this just a specific font or is it more involved than that?

terblus - see the SpriteFont plugin by Mipey. Rather than text rendered to an image, SpriteFonts are dynamic text which is based off having an image with each letter of the font rendered to an image (e.g. "abcdefghijklmnopqrstuv...". Then it builds up text by drawing individual letters from the image. That might be a good substitute for the Text object while keeping identical rendering.

SpriteFont is a way to display sprites (pictures) of a text. Each sprite displays one letter and is positionned so it looks like formatted text.

Edit: ninja'd by Ash