UDN
Search public documentation

ImportingFonts
Licensees can log in.

Red links require licensee log in.

Interested in the Unreal engine?
Check out the licensing page.

Questions about UDN itself?
Contact the UDN Staff

Creating and Importing Fonts

Document Summary: How to import true type fonts.

Document Changelog: Created by Joe Graf; updated by Maury Mountain. Maintained by Richard Nalezynski.

Importing a TrueType Font

Step 1 - Create a new asset

FontImportMenu.jpg

In the Generic Browser's view pane, right-click and choose the New Font Imported From TrueType menu option, as seen above. This creates the new asset dialog as seen below.

NewAssetDlg.jpg

Step 2 - Select the font you are importing

At the bottom of the dialog seen above, there is a Choose Font button. Use this button to visually select which font you are going to import. The text next to the button is updated using the font you have selected so that you can see the results of that selection.

Step 3 - Set the character-set properties

The table below lists the properties for importing a new font.

Property Description
USize The width of the generated textures in pixels
VSize The height of the generated textures in pixles
XPad The amount of space between characters in pixels on the X axis
YPad The amount of space between characters in pixels on the Y axis
AntiAlias Whether to enable anti-aliasing of the generated texture data or not
Chars Used to specify which characters are to be generated for the font. Useful if you aren't generating a complete font, or you wish to control which characters are used.
Wildcard Used in conjunction with Path. Specifies the pattern to use when selecting files from a given directory
Path Used to specify one or more files as the set of characters to include in the font. Useful if you are generating a font for localization and only want the characters that are needed to be in the font; then you'd specify the localization file(s) to use and it generates only the needed characters
Style Specifies the number of inked pixels per thousand. Use 400 for normal and 700 for bold
Italic Whether to create the font using italics or not
Underline Whether to create the font with underlining enabled or not
bCreatePrintableOnly Whether to remove non-printable characters from the font or not. Saves space as control characters are stripped from the font
bUseSymbolCharSet Whether to import the font as a set of symbols or a set of characters
ExtendBox The amount to push the texture UV's per character in pixels

If the ExtendBox number is super high, it can cause extra characters to draw, or if you're experiencing clipping with italic fonts, you can use it to fix that. ExtendBox is different from Padding (X or Y), Padding spaces the characters on the texture sheet based on the number you input, while ExtendBox only moves the 2D UV coordinates for the characters.

You'll generally want to add some padding when using ExtendBox, so you don't have half of a d character rendering when the e character is used.

In some cases, you may notice certain lowercase characters and special characters such as - are placed all the way up to the cap line instead of being placed on the baseline. The character positions on the actual texture is intentional, and will not appear like that in-game. It is an optimization to save overall texture usage when importing fonts, and only exists on the texture itself.

Regarding kerning, you can set a default kerning value for the font, but not the leading in the actual font itself.

Be careful with externally adjusting the texture based on the current import. The UV's will not change if you alter the texture, and as a result will have cut off textures and even more problems. Instead, reimport the fonts and check the bEnableLegacyMode checkbox, which will import the characters with similar baselines (as it was previously in the engine).

Font Properties

Double-click on a font in the generic browser to bring up the font properties. This displays a set of options for previewing and changing the font pages. The font pages are displayed in the left pane. The scroll bar allows you to view pages beyond the first. The export/update options require a page to be selected before using them.

FontProperties.jpg

Modifying an Existing Font

Once the font pages have been generated, you can modify them. Sometimes during the font generation, a character will extend outside the allotted space or some stray pixels will be added. In these cases, the artist can export the font pages to clean them up in a paint program. Use the font properties dialog to export and/or import font pages. First select the font page you want to export. After using the Export button, you navigate to the directory the font page is exported to. The export/import process uses a strict naming scheme which is:

FontName_Page_#.tga

The update process uses the name to determine which page to replace, so do not change the file name for the font page.

Update imports a single file as a replacement for the selected font page.

The Update All option scans a directory for TGA files that match the naming scheme. Those files are automatically imported replacing the existing font pages.

The Export option exports the selected font page to a TGA file using the naming scheme shown above.

Export All exports all of the font pages to the specified directory using the naming scheme described above.

Font Preview

To see how a font the looks inside UE3, use the "Preview" button on the font properties dialog. This, in turn, shows the font preview dialog seen below. This dialog renders the text using the same code as in game, allowing you to check for spacing problems without having to run the game. During a localization pass, this speeds up iteration time. As you enter text in the edit control, it is drawn in the preview area. You can change the color of the text and the background to verify that the font looks good in variety of settings.

FontPreview.jpg

MultiFonts

MultiFonts provide resolution independence for Fonts for scaling to different resolutions.

In the Generic Browser's view pane, right-click and choose the New MultiFont menu option. This creates the new asset dialog for MultiFonts.

To import a new MultiFont you only have to fill in the ResTests and ResHeights arrays. Both arrays should contain the same number of values. Each ResTests element is the closest vertical display resolution where the character set of the corresponding ResHeights height will be used.

For example, to import an MultiFont that supports three resolutions:

ResTests[0] = 480.0
ResHeights[0] = 16

ResTests[1] = 720.0
ResHeights[1] = 24

ResTests[2] = 1080.0
ResHeights[2] = 32

Now, when the game is running at 1280x720, the engine will automatically render using the character bitmaps that were baked out at point size 24. Note that we only look at the vertical screen resolution when deciding which glyph set to use. Also, if you use a point size value that's too large for your texture size, you'll probably get a memory/overrun crash, so be careful to use reasonable point size values.

Using Fonts

Once imported, you can use your fonts for text either programmatically, or in the UI Editor to set up Menus or HUDs. Using UI Styles will allow you to keep your font textures smaller and not have to have multiple fonts imported.

You are able to set up leading in the style for the font (in your UI Skin) to have unique kerning/leading values per style. This isn't exact kerning and leading, but will mimic the idea. It will essentially pad each character with the pixel value you enter. There is a style override for Spacing on label widgets as well, if you need fine tuning on a per-widget basis.

In the style, these are set in the Spacing section of a text/combo style: Chars for Kerning, Lines for Leading. This does use sub-pixels, for fine-tuning. You can also set negative values to compress the styles if needed!

NOTE: There currently is no way to apply the material system to the text that the engine renders to the screen; fonts can only be stored as Texture2D objects.