Introduction

Hi everyone! In this tutorial, we’ll create unreal engine custom font materials. Starting with the basics and progressing to advanced effects, you’ll master font materials by the end. For your convenience, a link to detailed documentation is included in the description.

Got stuck? Write your queries in the comments section. Let’s get started!

1. Project Setup

Create Project

1. Start a Blueprints project with the Third Person Template and enable Starter Content.
2. Organize your folders for clarity:
   • Create a folder named MaterialEfxContent.
   • Add a subfolder 002_CustomFontMaterial with another subfolder Maps.

Set Up the Scene

1. Create a basic level:
   • Name it 002_Map_CustomFontMaterial and save it in the Maps folder.
2. Adjust the scene:
   • Duplicate the floor actor, rename it “Wall,” and rotate it (X: 0, Y: 90, Z: 0).
   • Apply the M_Tech_Hex_Tile material to both floor and wall.
   • Delete the skylight and set the directional light intensity to 1.
   • Add a Post-Process Volume:
     • Infinite Extent (Unbound): True
     • Bloom Intensity: 1
     • Lens Flares: 0
     • Exposure Min/Max EV100: -1 / 1

 2. Importing Custom Fonts

Download and Import Fonts

1. Download fonts from websites like FontSpace and install them on your computer.
2. In the 002_CustomFontMaterial folder:
   • Create a Fonts folder and subfolders for each font.
   • Drag and drop .ttf files into Unreal Engine.
   • In the font’s properties, set Font Cache Type to Offline.

Set Up Distance Field Fonts

1. Select your font from the list.
2. Enable Use Distance Field Alpha for better quality rendering.
3. Adjust the following:
   • Texture Page Width: Set to 512.
   • Distance Field Scale Factor: Between 9-15 works best.
   • Distance Field Scan Radius Scale: Adjust between 0-4 for edge sharpness.

 3. Creating a Text Material

Set Up a Material for Fonts

1. Copy DefaultTextMaterialOpaqua into your Materials folder.
2. Rename it (e.g., M_CustomFont).

 4. Level-by-Level Material Customization

Level 1: Basic Material

• Set the custom font in the Font Param node.
• Add a Constant3Vector node for color customization and connect it to Base Color.
• Save and create a material instance (MI_CustomFont_Level01). Apply it to the text renderer.

 Level 2: Adding Textures

• Use a StaticSwitchParameter node named “UseTexture” (default: false).
• Connect a Texture Sample node to the true pin.
• Save, create a material instance (MI_CustomFont_Level02), and apply it to a new text renderer.

 Level 3: Adding Neon Lights

• Add an Intensity parameter to control emissive brightness.
• Connect a Multiply node to the Emissive Color pin.
• Save and create a material instance (MI_CustomFont_Level03). Apply it to the level.

 Level 4: Adding Color Animation

• Use a StaticSwitchParameter for color animation.
• Add TextureCoordinate, Panner, and Time nodes for animated effects.
• Save and create a material instance (MI_CustomFont_Level04). Apply it to the level.

 Level 5: Adding Text Animation

• Use the SimpleGrassWind material function to animate text.
• Connect to the WorldPositionOffset pin.
• Save, create a material instance (MI_CustomFont_Level05), and apply it to the text renderer.

 5. Troubleshooting Common Issues

Importing Fonts

• Always use Offline Cache Type for text renderers.
• Ensure your font fits into a single texture page to avoid display errors.

Material Updates

• After tweaking font settings, always reassign the font in the material.

Text Renderer Issues

• Assign both the font and material correctly to prevent gibberish text.

 6. Conclusion

Congratulations! You’ve successfully created a fully animated custom font material in Unreal Engine. Whether you’re looking for basic designs or advanced effects, these techniques will elevate your text rendering capabilities. Experiment, tweak, and share your creations!