# Two-color fonts

**URL:** <https://forum.realdash.net/t/two-color-fonts/7309>\
**Category:** Feature requests\
**Created:** [January 9, 2025, 4:11pm UTC](https://forum.realdash.net/t/two-color-fonts/7309 "2025-01-09T16:11:05Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 9, 2025, 4:11pm UTC](https://forum.realdash.net/t/two-color-fonts/7309/1 "2025-01-09T16:11:05Z")

</div>

in Chinese dashboards, I noticed two-color fonts with gradient fill.

 ![image](https://forum.realdash.net/uploads/default/original/2X/9/9fc12ef8be8bd1865f905ec849d2e7b9a62d8175.jpeg)

---

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 10, 2025, 7:44am UTC](https://forum.realdash.net/t/two-color-fonts/7309/2 "2025-01-10T07:44:35Z")

</div>

how do I see a possible implementation?: This is to embed a font editor where it will be possible to pre-fill or a new rule for gradient filling of elements.

---

<div class="post-metadata">

**Author:** ![realdashdev](https://forum.realdash.net/user_avatar/forum.realdash.net/realdashdev/32/6_2.png) [@realdashdev](https://forum.realdash.net/u/realdashdev)\
**Post date:** [January 10, 2025, 8:46am UTC](https://forum.realdash.net/t/two-color-fonts/7309/3 "2025-01-10T08:46:58Z")

</div>

Currently best way to implement this is use gradient behind the text and use ‘Additive’ blending mode on text gauge.

In theory, RealDash supports full color fonts, as fonts are converted to bitmap fonts internally. There is just no proper bitmap font file format that could be imported to the assets.

---

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 10, 2025, 8:54am UTC](https://forum.realdash.net/t/two-color-fonts/7309/4 "2025-01-10T08:54:51Z")

</div>

‘Additive’ blending mode on text gauge. - please if not hard provide a link to any example

---

<div class="post-metadata">

**Author:** ![realdashdev](https://forum.realdash.net/user_avatar/forum.realdash.net/realdashdev/32/6_2.png) [@realdashdev](https://forum.realdash.net/u/realdashdev)\
**Post date:** [January 10, 2025, 9:38am UTC](https://forum.realdash.net/t/two-color-fonts/7309/5 "2025-01-10T09:38:15Z")

</div>

- Edit mode, select your text gauge
- Go to Look’n Feel-\>Colors-\>Blend Mode and change Blend Mode to ‘Additive’

Now pixel colors of the text will be added to whatever pixels are behind it when drawing the text.

---

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 10, 2025, 10:11am UTC](https://forum.realdash.net/t/two-color-fonts/7309/6 "2025-01-10T10:11:29Z")

</div>

![image](https://forum.realdash.net/uploads/default/original/2X/2/2d4339bd837178a96377639495cc45e9c3123651.png)

next step unclear for me, sorry

---

<div class="post-metadata">

**Author:** ![realdashdev](https://forum.realdash.net/user_avatar/forum.realdash.net/realdashdev/32/6_2.png) [@realdashdev](https://forum.realdash.net/u/realdashdev)\
**Post date:** [January 10, 2025, 10:24am UTC](https://forum.realdash.net/t/two-color-fonts/7309/7 "2025-01-10T10:24:02Z")

</div>

Additive mode is set, now colors of the text are added to the background. Note that white text produces white even in additive mode.

---

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 10, 2025, 10:39am UTC](https://forum.realdash.net/t/two-color-fonts/7309/8 "2025-01-10T10:39:34Z")

</div>

![image](https://forum.realdash.net/uploads/default/original/2X/5/5d38ea16ae6d2cbcffc76eaaa71eb09d28c5f88e.png)

I don’t see the difference… I wish there were white highlights on the font on the Chinese car.

---

<div class="post-metadata">

**Author:** ![Kaelub](https://forum.realdash.net/user_avatar/forum.realdash.net/kaelub/32/1659_2.png) [@Kaelub](https://forum.realdash.net/u/Kaelub)\
**Post date:** [January 11, 2025, 10:05pm UTC](https://forum.realdash.net/t/two-color-fonts/7309/9 "2025-01-11T22:05:57Z")

</div>

you can try playing with Outline size and color

---

<div class="post-metadata">

**Author:** ![DeLasNoches](https://forum.realdash.net/letter_avatar_proxy/v4/letter/d/ecae2f/32.png) [@DeLasNoches](https://forum.realdash.net/u/DeLasNoches)\
**Post date:** [January 12, 2025, 4:31am UTC](https://forum.realdash.net/t/two-color-fonts/7309/10 "2025-01-12T04:31:33Z")

</div>

You could try use a mask image. I don’t know how well it would necessarily work.

I think you wouldn’t be able to adjust colors on the app. But make a rectangel/square on phtoshop and have it fade white at the bottom. Then use that as a mask image for your text.

I tried it out and it works on my end.

---

<div class="post-metadata">

**Author:** ![realdashdev](https://forum.realdash.net/user_avatar/forum.realdash.net/realdashdev/32/6_2.png) [@realdashdev](https://forum.realdash.net/u/realdashdev)\
**Post date:** [January 13, 2025, 7:33am UTC](https://forum.realdash.net/t/two-color-fonts/7309/11 "2025-01-13T07:33:55Z")

</div>

Additive blending will not replace gradient effect, but can get you close with certain settings. I will put ‘full color’ font into a feature request list. No promises though.

---

<div class="post-metadata">

**Author:** ![Falcon\_S](https://forum.realdash.net/user_avatar/forum.realdash.net/falcon_s/32/2100_2.png) [@Falcon\_S](https://forum.realdash.net/u/Falcon_S)\
**Post date:** [January 14, 2025, 5:09pm UTC](https://forum.realdash.net/t/two-color-fonts/7309/12 "2025-01-14T17:09:20Z")

</div>

> [@DeLasNoches](#):
>
> You could try use a mask image. I don’t know how well it would necessarily work.
> 
> I think you wouldn’t be able to adjust colors on the app. But make a rectangel/square on phtoshop and have it fade white at the bottom. Then use that as a mask image for your text.
> 
> I tried it out and it works on my end.

can I link to your file, please?

---

<div class="post-metadata">

**Author:** ![realdashdev](https://forum.realdash.net/user_avatar/forum.realdash.net/realdashdev/32/6_2.png) [@realdashdev](https://forum.realdash.net/u/realdashdev)\
**Post date:** [January 16, 2025, 12:08pm UTC](https://forum.realdash.net/t/two-color-fonts/7309/13 "2025-01-16T12:08:19Z")

</div>

Here are the steps to make text with gradient:

1. Prepare a gray scale gradient image, something like this:

 ![gradient](https://forum.realdash.net/uploads/default/original/2X/8/8d944f34e80f0ed2dcb5e66f6037b02cdd3c1ec4.png)

1. In RealDash add a text gauge, select and go to Look’n Feel.
2. Go to ‘Images-\>Mask Image’ and import your gradient image with the ‘plus’ sign button.
3. Optionally you can change the ‘Colors-\>Text Color’ for different blending.

The result:

 ![Screenshot 2025-01-16 14.06.17](https://forum.realdash.net/uploads/default/original/2X/2/2800aa5cc2aa3f049e0eb2bdaa2a1c96003a8187.png)

Basically you can use any image as mask image, but mask image is rendered on top of the entire text, not over individual characters of the text, so vertical gradient works the best.
