# Issues with DF fonts

**URL:** <https://forum.defold.com/t/issues-with-df-fonts/63744>\
**Category:** Questions\
**Created:** [October 24, 2019, 12:15pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744 "2019-10-24T12:15:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![gianmichele](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/gianmichele/32/24028_2.png) [@gianmichele](https://forum.defold.com/u/gianmichele)\
**Post date:** [October 24, 2019, 12:15pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/1 "2019-10-24T12:15:26Z")

</div>

Hey there,

I’m having this weird issue with DF fonts.  
With the typeface I’m using, I’m getting artifacts in the created font (see the W especially)

 ![56](https://forum-defold-uploads.b-cdn.net/original/3X/2/0/206d48184a3becff96f90f75b8561b1cd0865486.jpeg)

I was able to get a better representation by modifying the default font shader a bit

 ![27](https://forum-defold-uploads.b-cdn.net/original/3X/8/6/86b0b9cb85abc4f49ae9fb0040aa014cfdbed3c1.png)  
 ![05](https://forum-defold-uploads.b-cdn.net/original/3X/5/3/5340cd06ce56307236ba067296d8ec0a668baefe.jpeg)

Unfortunately this works only with display that have HiDpi (phones and my macbook pro). On all the other (old macbook air and macbook pro connected to an external 1080p monitor) I’m getting extremely jagged antialias.

Any idea on how to solve this?

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [October 24, 2019, 1:55pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/2 "2019-10-24T13:55:26Z")

</div>

> [@gianmichele](#):
>
> Any idea on how to solve this?

@jhonny.goransson might have some ideas?

---

<div class="post-metadata">

**Author:** ![jhonny.goransson](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/jhonny.goransson/32/3864_2.png) [@jhonny.goransson](https://forum.defold.com/u/jhonny.goransson)\
**Post date:** [October 25, 2019, 5:41am UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/3 "2019-10-25T05:41:05Z")

</div>

Do you have a repro case?

---

<div class="post-metadata">

**Author:** ![gianmichele](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/gianmichele/32/24028_2.png) [@gianmichele](https://forum.defold.com/u/gianmichele)\
**Post date:** [October 25, 2019, 7:43am UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/4 "2019-10-25T07:43:03Z")

</div>

Thanks a lot for looking into this.

Attached is a repro project.

[font\_test.zip](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/3X/f/5/f584511f217fa44801da596dc3ea28de0d48b8a2.zip) (134.4 KB)

---

<div class="post-metadata">

**Author:** ![GreenArrow](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/greenarrow/32/18490_2.png) [@GreenArrow](https://forum.defold.com/u/GreenArrow)\
**Post date:** [December 9, 2019, 8:05pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/5 "2019-12-09T20:05:25Z")

</div>

![font](https://forum-defold-uploads.b-cdn.net/original/3X/8/1/81ca9393eb3e968fd9d9f1500b25a5cded994fe2.png)

I’m experiencing similar issues using some Google Fonts e.g. Roboto Slab in the attached screen shot.

Is this something that can be fixed in Defold? Or is this an issue with those fonts?

---

<div class="post-metadata">

**Author:** ![Alex\_8BitSkull](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/alex_8bitskull/32/5424_2.png) [@Alex\_8BitSkull](https://forum.defold.com/u/Alex_8BitSkull)\
**Post date:** [May 4, 2022, 7:25am UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/6 "2022-05-04T07:25:56Z")

</div>

Bumping this to say I am also getting this issue.

Google version:

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/1/0/106d02cff88e60d104a1b529deec11179f7c2771.png)

Same font downloaded elsewhere:

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/c/b/cb5addda9d8e97c45c3e5c435b4bd20761fdab92.png)

It may be that the Google fonts are corrupted somehow (though this would be surprising). Perhaps having the two fonts available might assist in seeing if there is an issue on the Defold side.

[font files.zip](https://forum.defold.com/uploads/short-url/1ELCjISNlQvsloQHMnGuSZgbyvx.zip) (185.5 KB)

---

<div class="post-metadata">

**Author:** ![MasterMind](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mastermind/32/31839_2.png) [@MasterMind](https://forum.defold.com/u/MasterMind)\
**Post date:** [May 4, 2022, 2:57pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/7 "2022-05-04T14:57:30Z")

</div>

Hello, no this isn’t corrupted and can be explained by taking a closer look reveals that the google font is most likely the original font which some of the glyphs are composed of multiple vector shapes. Like so:

 ![A_google](https://forum-defold-uploads.b-cdn.net/original/3X/7/5/75a1f6a13aecf064875cc33a15c080fe6fe838bd.png)

The non-google version is simply a boolean union of the shapes creating a solid vector shape. When we bring in the original version into defold and setup the font as distance field(DF), Defold generates the DF font as a texture(s) and it does so by iterating over each of the glyphs shapes. With the highest font size of 118 defold results:

(DF texture)

 ![Defold_distancefield_118](https://forum-defold-uploads.b-cdn.net/original/3X/a/e/ae42187237af0d7f75ecce47e55ac5dff1629677.png)

(DF font result)

 ![a_results](https://forum-defold-uploads.b-cdn.net/original/3X/1/b/1b627543f2d7884dc28916f6afb001f26f502d5e.png)

A fix could be to edit the font’s glyphs and boolean union the vector shapes manually before setting up the DF fonts in defold or use the non-original version that is already unioned.

* * *

Deeper Dive - notes:

I think there are actual issues with df font in Defold. Defold seems to generate the distance field texture from the generated font texture and the quality depends on the font “size” which in turn generates a certain texture size for that font. I believe there are ways to greatly improve this.

As Valve highlighted their technique in a paper from Siggraph 2007:

> **[SIGGRAPH2007\_AlphaTestedMagnification.pdf](https://cdn.cloudflare.steamstatic.com/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf)**
>
> 5.03 MB

If we are able to generate the distance field texture from a temporary high resolution texture (discard the high res texture) then scale down the distance field texture using bicubic resampling we can get more low cost df texture and use that with a font texture that is independent from the df resolution and gain better quality & performance with the end results.

I see opportunity here to use valves technique using signed distance field in defold with more than just fonts if a shader was made for this and the developer provides their own textures and uses a quad to draw to for 2d or 3d model to take advantage of the sampler texture slots.

For testing purposes I created my own textures if anyone is interested.

 ![Defold_HardLogo](https://forum-defold-uploads.b-cdn.net/original/3X/f/2/f24f841dac4cee90a7800ccfa3a05f6c257263b0.png) - display texture  
 ![Defold_DF_2048](https://forum-defold-uploads.b-cdn.net/original/3X/d/4/d4994d4f3862dcfbfe423f8c416cad84b5b03aa3.jpeg) - High Res Signed distance field texture

 ![Defold_DF_128_bicubic](https://forum-defold-uploads.b-cdn.net/original/3X/d/a/dafcbdb39c1d323d1b103a6d76f1adece8161a4d.png) - low res scaled (bicubic resampled) texture

question:  
Quick look in the distance field fragment program seems to reference “SDF” ( Signed Distance Field )  
But is defold using “signed” values? Both positive and negative values encoded in distance field? imagine crispy solid outlines.

---

<div class="post-metadata">

**Author:** ![Alex\_8BitSkull](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/alex_8bitskull/32/5424_2.png) [@Alex\_8BitSkull](https://forum.defold.com/u/Alex_8BitSkull)\
**Post date:** [May 4, 2022, 4:01pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/8 "2022-05-04T16:01:34Z")

</div>

Thanks for the excellent writeup, @MasterMind.

I opened a GitHub issue and linked to your post.

[https://github.com/defold/defold/issues/6577](https://github.com/defold/defold/issues/6577)

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [December 18, 2022, 1:46pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/9 "2022-12-18T13:46:19Z")

</div>

> [@MasterMind](#):
>
> boolean union the vector shapes manually before setting up the DF fonts in defold or use the non-original version that is already unioned.

Thanks, it helped me:)

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [June 11, 2023, 2:32pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/10 "2023-06-11T14:32:34Z")

</div>

If you choose to edit the font to make it work with Defold, it’s less tricky than you might think. There is a handy function for this in [FontForge](https://fontforge.org/), which is open source:

 ![Screenshot 2023-06-11 at 15.15.06](https://forum-defold-uploads.b-cdn.net/original/3X/9/e/9e488fef8d5ac1d1d97e52afe364288fb9da5bd3.jpeg)

Just select all glyphs and choose Element \> Overlap \> Remove Overlap.

Before:

 ![before](https://forum-defold-uploads.b-cdn.net/original/3X/2/6/26859515fc97470a83a95b45709a20c8524ad5bd.png)

After:

 ![after](https://forum-defold-uploads.b-cdn.net/original/3X/b/3/b33ae26a3651a93fd153190edecea0fed4069488.png)

---

<div class="post-metadata">

**Author:** ![Margarita\_Belorukova](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/margarita_belorukova/32/32675_2.png) [@Margarita\_Belorukova](https://forum.defold.com/u/Margarita_Belorukova)\
**Post date:** [February 12, 2025, 1:37pm UTC](https://forum.defold.com/t/issues-with-df-fonts/63744/11 "2025-02-12T13:37:50Z")

</div>

Thanks for the solution!  
It works, however partially.  
After removing overlaps some glyphs remained broken in the output font texture.

 ![Снимок экрана 2025-02-12 152441](https://forum-defold-uploads.b-cdn.net/original/3X/7/c/7c32b16494206bd0e9551e75dc71a2d039d1d5d1.png)  
Like the crossed O from the image, because it’s composed from other glypths, rather than its own vector shape.

The solution is to convert a glyph to a vector shape by:  
Edit → Unlink reference  
And only then do Element \> Overlap \> Remove Overlap
