# Fancy Text extension not rendering text properly

**URL:** <https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725>\
**Category:** Help\
**Created:** [May 17, 2025, 3:32am UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725 "2025-05-17T03:32:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![new\_account123456](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/new_account123456/32/32461_2.png) [@new\_account123456](https://forum.makecode.com/u/new_account123456)\
**Post date:** [May 17, 2025, 3:32am UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/1 "2025-05-17T03:32:06Z")

</div>

Link to font if needed: [https://arcade.makecode.com/\_J8bdte9MVL3Y](https://arcade.makecode.com/_J8bdte9MVL3Y)

The Fancy Text extension is not rendering text correctly (renders glyphs as squares).

My font in the Font Editor:

 ![Screenshot 2025-05-16 at 6.56.27 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/6/1/612a2d33d34200312f906fc64bf41505ef74efed.png)

I tested the font with the string “HELLO WORLD!” and this is the output:

 ![Screenshot 2025-05-16 at 6.55.46 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/6/2/62e0aa31f1186a9a709907059beb378f261e6966.png)

Does anyone know how to fix this?  
The font is 8x8.

---

<div class="post-metadata">

**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\
**Post date:** [May 17, 2025, 4:25am UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/2 "2025-05-17T04:25:38Z")

</div>

I just recently delved into how Fancy Text fonts work, so I guess I’ll take a look!  
…  
This is very weird…  
…  
Yeah I got nothing. @richard I summon thee!

Also who is approving stuff at 12:30 am??

---

<div class="post-metadata">

**Author:** ![new\_account123456](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/new_account123456/32/32461_2.png) [@new\_account123456](https://forum.makecode.com/u/new_account123456)\
**Post date:** [May 17, 2025, 9:39pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/3 "2025-05-17T21:39:45Z")

</div>

Actually, _any_ font that i make and test is rendering as squares.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [May 19, 2025, 4:36pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/4 "2025-05-19T16:36:58Z")

</div>

ack, sorry! this is my fault. i made some changes to the font format but i haven’t bumped the extension yet. i’ll try to get a new version out later today. the bright side is it will have lots of new features

---

<div class="post-metadata">

**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\
**Post date:** [May 19, 2025, 6:00pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/5 "2025-05-19T18:00:45Z")

</div>

Oh yeah! You said something about changing the extension on one of the advanced streams! The interesting thing is that the data format kinda works in my own font editor, but only kinda, and I think I can see how your new data format works just by looking at this broken font, which is really cool!

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [May 19, 2025, 6:17pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/6 "2025-05-19T18:17:07Z")

</div>

i’m surprised it works at all in your editor. i think my format is completely different from the baked in one.

BTW, the binary format is documented here:

> <https://github.com/riknoll/font-editor/blob/main/src/lib/font.ts#L116>

---

<div class="post-metadata">

**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\
**Post date:** [May 19, 2025, 6:28pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/7 "2025-05-19T18:28:19Z")

</div>

![Screenshot 2025-05-19 at 2.19.27 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/b/0/b0a6a9a815e97ec53cebbbae50e7559e20f568d2.png)  
Lol yeah me too! I’m guessing that the messed up chunk at the beginning is that metadata? and the rest is encoded in byte sized pieces. Is your format using the default font style of one or two bytes per column? Or are they packed closer than that? Like, if the character has a height of 7 does each column still take a whole byte or are you packing it so that every 7 bits is a column? If so, then this only works because the font I was given happened to be 8 pixels tall.

---

<div class="post-metadata">

**Author:** ![ADM\_F](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/adm_f/32/19808_2.png) [@ADM\_F](https://forum.makecode.com/u/ADM_F)\
**Post date:** [May 29, 2025, 5:16pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/8 "2025-05-29T17:16:28Z")

</div>

i tried to make a font earlier missing this post and got confused when it was just squares

before i remake the font i wanted to ask if it works now

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [May 29, 2025, 5:17pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/9 "2025-05-29T17:17:49Z")

</div>

sorry, i’ve been busy working on microbit things. let me push the update right now

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [May 29, 2025, 5:51pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/10 "2025-05-29T17:51:21Z")

</div>

alright, pushed! the new version is 0.2.0. here are the new features:

## two-tone fonts!

you can now create two-tone fonts in the font editor, just go into the font settings and check the “two-tone” setting. once two-tone is enabled, you can switch between the two colors by clicking this button:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/2/1/21cb6a2a855c0f5d51cb79f0c0444dfee6679c33.png)

as the name implies, two-tone fonts can have two colors instead of 1. to set the color of a text sprite using a two-tone font, use the new two-tone color block:

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/0/c/0ccb08f187188effc0c72feb13744759354902ce.png)

you can slot it into the color field just like a normal color:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/5/7/578f5c9f7f56058fd5f1141ab23afe39c93ff531.png)

## kerning!

fonts now support kerning! if you want your font to automatically be kerned, you can check the “auto kern” setting in the font setting menu. this will automatically adjust the characters in your font so that they are kerned.

all of the built-in fonts are now also kerned. for example, see how the “T” overhangs the “a” in this image:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/1/6/169563891e5ed31717ebd9481794a02a167926e2.png)

here’s how that text looked in the old version:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/e/f/ef1218b1daca7b9297fd9f36f9efec6621fff4a1.png)

## line spacing!

you can now set the amount of spacing to put between lines of text in the font settings!

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [May 29, 2025, 5:58pm UTC](https://forum.makecode.com/t/fancy-text-extension-not-rendering-text-properly/36725/11 "2025-05-29T17:58:13Z")

</div>

also, the font editor now supports importing fonts that are made for the [Playdate](https://play.date/) console!

this is cool, because it means you can now use this much better font editor for making fonts:

> **[tophat](https://kaasiand.cool/tophat/)**
>
> A powerful tool to create bitmap fonts for use with the Playdate SDK.

if you’re making a new font, consider using tophat instead! it supports unicode characters from other languages, outling fonts, manual kerning, etc.

steps for turning a tophat/playdate font into an arcade font:

1. export your font as a .fnt file:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/d/1/d12242421e69d52fda37f48be57e2864188dad87.png)
2. in my font editor, click the import button:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/2/d/2dbd3c869936e9a723fa2fe2cf5a1f35ae2f66e9.png)
3. click “Choose File” and select your `.fnt` file
4. share or download the font just like normal!
