How can I make a font with an outline?

In Tappy Chicken the font used is white with a black outline. How can I go about making that look?

To add an outline to your custom font:

  1. Import your desired font (see here for importing).
  2. In the font editor, select the page(s) of font you want to modify.
  3. Click ‘Export’ and choose a destination for the exported file (the file will export as a .tga).
  4. Open and modify the .tga in your editor of choice (I use Gimp).
  5. After making all of your modifications, in the UE4 font editor click ‘Update’ and select your just modified .tga.

I must be doing something wrong. This leads to all white TGA files :confused:

Anyone found a solution to this yet? I too get white TGA files.

You could try doing the outline on the existing font by using the distance field. I go over a similar technique in this thread:

basically you would do something like “distance” where A is the font alpha, B is your outline center location. Then multiply by a parameter for thickness and clamp. Then use that as a lerp alpha to control the color of your outline.

In terms of the other issue, I setting it to generate distance field alpha may be what is stomping the values with the distance field info.

If you could post an example for the outline here i would be forever grateful .
I managed to replicate the “text effects” material but i only want an outline so my text does not look “flat”. I tried to follow your advice here, but for the love of me i am having a hard time figuring out anything by my own regarding materials that is. :slight_smile:

here’s a basic version using spheremask:

just hook up vertex color instead of green and you can set outline color on the text actor.

How do you apply this Material to the font?

By applying it as the material to a text render component. This is only for text render components, it won’t work inside of umg as far as I know.

In TGA file look at alpha chanel, there is image of font.

I did a drop shadow effect by drawing the same text in black first at a 1 pixel offset. Works pretty well.

figured out a solution for the white TGA files

solution to white TGA files:

Cheap and easy hack: big font, little font.