Home
  • English
  • 中文
Home
  • English
  • 中文
  • Get Started

    • Install
    • Hello LGUI
    • Custom Button
    • Use custom font
    • Prefab workflow
    • Interaction
    • Button from scratch
  • Sample Projects

    • Sample Projects
  • Prefab Workflow

    • LGUI Prefab
    • PrefabEditor
    • LGUILifeCycleBehaviour
    • LGUIPrefabInterface
  • Rendering

    • LGUICanvas
    • Screen Space Overlay
    • World Space - UE Renderer
    • World Space - LGUI Renderer
    • LGUI render flow
    • UICanvasGroup
  • Visual Components

    • UIText
    • UIEffect
    • TextAnimation
    • UIBackgroundBlur
    • UIBackgroundPixelate
  • Events

    • LGUIEventDelegate
    • LGUIEventSystem
  • Interaction Components

    • UISelectable component
  • Layout

    • Basic Layout
    • Auto Layout
  • Tween Animation

    • LTween
    • Use LTween for UI element
  • Performance

    • LGUI Stat
  • ReleaseNotes

    • LGUI 3.x
    • LGUI 2.x
  • FAQ

    • Why use prefab?
    • Update project from LGUI2 to LGUI3
    • Project 3d world position to LGUI's screen 2d position
    • Deproject LGUI's screen position to world
    • Use custom material for UI elements
    • Disable interaction component
    • Find Child by DisplayName
    • Get actor or component inside prefab
    • Anti-aliasing

Use custom font

In this section, we will use a custom font file(ttf, ttc, otf) to create our UIText. LGUI provides two type of fonts:

  • LGUI Font - Bitmap font, generate different char pixels on texture area when need to render different font size.
  • LGUI SDF Font - Default font type, use signed distance field technique to render, can render smooth character no matter how big the font scale is.

Prepare a font file.

LGUI use freetype to render fonts, so we will use freetype supported format(ttf, ttc, otf). Download a font file or grab one from system fonts directory. I use "华文新魏" from C:/Windows/Fonts:
step1

Copy the font file to your UnrealEngine project directory (same directory of the .uproject file).

Create LGUI Font asset.

Right click on the empty area of your content folder, choose "LGUI"->"LGUI SDF Font", that will create a LGUI SDF Font asset:
step2

Rename the asset to “MyLGUIFont”: step3

Double click it to open font editor window, click the "..." after "FontSourceFile" property, and choose the font file you just prepared:
step4

Create UIText.

Follow the HelloWorld section to create a base screen space UI.

Select "ScreenSpaceUIRoot", and right click the down arrow, choose "Create UI Element"->"UIText":
step5

Rename the UIText you just created to "MyUIText":
step6

Change UIText property.

Select "MyUIText", change "PosZ" to -120, so it will move down a little bit in viewport:
step7

Select "MyUIText", change "Size" to 40, "Color" to black, typein "中国智造" in the "Text":
step8

Use our own font.

The important part, select "MyUIText" and drag "MyLGUIFont" to the "Font" property, see the font change in viewport:
step9

Last Updated:
Contributors: lf2007hf
Prev
Custom Button
Next
Prefab workflow