Weird font behaviour

For some reason text made from html on my phone is shifted up in all elements.

I downloaded the luckiestGuy.ttf font from the internet. Everything works fine on a computer, but on Android this font is shifted slightly up while the normal one, e.g. Arial, is positioned normally. Has anyone had a problem and knows how to fix it?

I guess I have to turn off some default actions. Anyone knows how to help?

Luckiest guy, shifted

Arial, normal

Print text.getTextMetrics() and compare them.

font size is 22px

Luckiest Guy:
ascent: 20
descent: 5
fontSize: 25

Arial:
ascent: 21
descent: 2
fontSize: 23

I had an issue with font placement where if I put the number of strokeThickness in quotes, it moved the x and y value. Removing the quotes and just having the number alone, set it at the right x and y coordinates. Don’t know if this helps you, but maybe if one of the numbers in the text set up is in quotes, try removing them. Also you could try replacing your text with bitmap font. It’s really easy to set up and is less intensive on the processing. Just a couple of suggestions.

I use a bitmap font and the text on the canvas is fine.The problem occurs when coding html, mainly paragraphs

simple <span> 1 </span> is shifted up

Any help? :frowning:

simple <span> 1 </span> is shifted up

You’re saying thats the case for the custom font and doesn’t happen with Arial? If you’re seeing this issue even when using the font in HTML elements, then that points to a problem with the font itself, not with anything phaser is doing.

This only occurs on Android so I think I need to turn off some default option which I don’t know. I tried to download other fonts and it happens the same.