Font Materials and Outlines

Choose your OS:

In addition to being able to set a Color and Opacity for your Font in UMG, you can also use Materials and font outlines for additional Font styling.

Font Colors

You can set the Vertex Color for your Font by setting its Color and Opacity.

GreenFontNoMaterial.png

Without a Font Material specified, this will apply a solid color to your text.

GreenFontNoMaterialDisplay.png

Font Materials

You can specify a Font Material for your Font in the Details panel.

ColorAndOpacity.png

If your Font Material doesn't have a Vertex Color node, the effect is like a simple multiplication.

BaseColorFinalFontMat.png

BaseColorFinalDisplay.png

Font Material Setup

Font Material Preview

Final Font

However, if you place a Vertex Color node in your Font Material, you can use its outputs to do math within your shader.

VertexColorFinalMat.png

VertexColorFont.png

Font Material Setup

Font Material Preview

Final Font

Materials used as font materials must be in the User Interface domain.

UI.png

Font Outlines

You can specify a different Outline Color as well as a different Material to use for a font outline.

FontOutlineSettings.png

The size of the outline is specified in Slate units, but when the font's scale is 1.0, 1 Slate unit is equivalent to 1 pixel.

FontOutline5Display.png

One interesting note is that you can specify whether or not to use Separate Fill Alpha.

SeparateFill.png

When this is enabled, the outline is translucent where the filled area will be, allowing you to adjust the alphas of the font and the font outline independently. When it is disabled, the font is overlaid on the outline, so the alphas are additive and the outline color and Material is visible through a font with an alpha less than 1.

SeparateAlphaOff.png

SeparateAlphaOn.png

Font Color Alpha = 0.5, Separate Fill Alpha disabled

Font Color Alpha = 0.5, Separate Fill Alpha enable