\
**Category:** Questions\
**Created:** [May 13, 2019, 7:12am UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993 "2019-05-13T07:12:55Z")\
**Posts on this page:** 8\
**Page:** 1
**Author:**  [@gianmichele](https://forum.defold.com/u/gianmichele)\
**Post date:** [May 13, 2019, 7:12am UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/1 "2019-05-13T07:12:55Z")
I’m getting an extremely jagged font render in HTML5 compared to a normal desktop build. Any suggestion?
For reference, in the font properties antialias is on and I’m using the label material.
---
**Author:**  [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [May 13, 2019, 8:08pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/2 "2019-05-13T20:08:42Z")
Hmm, is it a bitmap or distance field font?
@AGulev, any idea?
---
**Author:**  [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [May 13, 2019, 8:11pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/3 "2019-05-13T20:11:54Z")
> [@gianmichele](#):
>
> I’m getting an extremely jagged font render in HTML5 compared to a normal desktop build. Any suggestion?
Could you please upload a project with minimal repo case?
---
**Author:**  [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [May 14, 2019, 7:49pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/4 "2019-05-14T19:49:34Z")
Thanks for the repo case (in PM).
This is **DEF-2396** issue:
> [@How to get better quality web render?](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/10):
>
> Hi @Flemming! I did a bit of investigation tonight and found out we aren’t really taking care of high-dpi displays for WebGL. Are you by any chance on such device? Here is a quick comparison on my iMac (Left: HTML5, Right: Native window): [image] With some fixes to canvas size and css: [image] Here is a quick explanation what I did to get the result in the last image; Get the pixel ratio through JS; window.devicePixelRatio Update the canvas width and height by multiplying the pixel ratio…
I fixed this bug in your repository by adding logic that takes into account devicePixelRatio (method resize\_game\_canvas):
```lua
function resize_game_canvas() {
var app_container = document.getElementById('app-container');
var game_canvas = document.getElementById('canvas');
var dpi = window.devicePixelRatio || 1;
var width = {{display.width}};
var height = {{display.height}};
app_container.style.width = width+"px";
app_container.style.height = height+"px";
game_canvas.width = width*dpi;
game_canvas.height = height*dpi;
}
function load_engine() {
resize_game_canvas();
...
```
Also, this issue solved in FBInstant games template:
>
---
**Author:**  [@gianmichele](https://forum.defold.com/u/gianmichele)\
**Post date:** [May 14, 2019, 9:52pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/5 "2019-05-14T21:52:54Z")
Thanks a lot! This is why this community is awesome.
---
**Author:**  [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [June 14, 2019, 12:32pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/6 "2019-06-14T12:32:16Z")
Any chance of also adding this to the main HTML5 template? When I do a copy paste botch, there is a border and you don’t see all of the game area for some reason.
---
**Author:**  [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [June 14, 2019, 1:38pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/7 "2019-06-14T13:38:58Z")
We will update the default template soon and this will be included.
---
**Author:**  [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [August 19, 2019, 12:55pm UTC](https://forum.defold.com/t/jagged-fonts-in-html5-def-2396-solved/51993/8 "2019-08-19T12:55:33Z")
Solved in [Defold 1.2.160 has been released](https://forum.defold.com/t/defold-1-2-160-has-been-released/60637)