# Fonts blurry for small canvas

**URL:** <https://phaser.discourse.group/t/fonts-blurry-for-small-canvas/15094>\
**Category:** Phaser 3\
**Created:** [January 22, 2025, 5:34pm UTC](https://phaser.discourse.group/t/fonts-blurry-for-small-canvas/15094 "2025-01-22T17:34:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bornide](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@Bornide](https://phaser.discourse.group/u/Bornide)\
**Post date:** [January 22, 2025, 5:34pm UTC](https://phaser.discourse.group/t/fonts-blurry-for-small-canvas/15094/1 "2025-01-22T17:34:13Z")

</div>

**Hi,**

I’m working on a game for PirateJam, and I’ve encountered an issue with fonts. My canvas size is 320x180, as I’m using 16x16 pixel art assets and don’t need a larger canvas. However, at this resolution, both text and bitmap text appear blurry, and I’m struggling to find a way to make them crisp and clear.

 ![Capture d’écran 2025-01-22 182555](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3c6d3772d12dac770696beeae75288f4c3163f81.png)

In the screenshot below, you’ll notice a “0” next to a coin icon. This “0” comes from a TTF font file. I haven’t altered its size—it’s at its default size, yet it’s blurry. And it’s loaded (http 200) in the network tab.  
[PixelSerif\_16px\_v02.ttf](https://phaser.discourse.group/uploads/short-url/kUV1du2IhzBsMgtlB7BmPaxxLiR.ttf) (128.7 KB)

The other text, “00000 pts,” has the same issue. It’s loaded as bitmap text from a PNG/XML font. I resized it to 11, as the default size was too large. It’s “wendy” from others Phaser tutorials.

Here’s how I load the “0” font:

```javascript
@font-face {
    font-family: "pixelserif1234";
    src: url("/fonts/PixelSerif_16px_v02.ttf") format("truetype");
}

```

And how I add the text:

```javascript
this.add.text(96, 9, String(this.coinCollected), {
    fontFamily: "pixelserif1234", // Font declared in @font-face
    color: "#ffffff",
});

```

For the bitmap text:

```javascript
this.load.bitmapFont(Resources.fonts.wendy, "fonts/wendy.png", "fonts/wendy.xml");

```

And adding it:

```javascript
this.add.bitmapText(110, 4, Resources.fonts.wendy, String(this.score).padStart(6, "0") + " pts", 11);

```

Thanks so much for your help and time!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 22, 2025, 6:41pm UTC](https://phaser.discourse.group/t/fonts-blurry-for-small-canvas/15094/2 "2025-01-22T18:41:00Z")

</div>

Ahoy there. The TrueType text is blurry because it’s a vector rasterized at a low resolution. The bitmap font is distorted because of pixel aliasing.

Probably best to find a different bitmap font at 11px, or use Wendy at 16px.

---

<div class="post-metadata">

**Author:** ![Bornide](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@Bornide](https://phaser.discourse.group/u/Bornide)\
**Post date:** [January 25, 2025, 10:52am UTC](https://phaser.discourse.group/t/fonts-blurry-for-small-canvas/15094/3 "2025-01-25T10:52:50Z")

</div>

I’ll make my own font since I can’t find one that works for a small canvas like mine