Creating Fonts

Published — Edited

When working with VTerminal, fonts are comprised of one PNG file and one FNT file. The PNG file must be called bitmap.png and the FNT file must be called data.fnt.


Font Generation

To generate a font for use with VTerminal, you must use BMFont. As a general rule, only monospace fonts and fonts with square dimensions should be used. All other types of fonts currently have limited support and may not render correctly. Support for non-monospace and non-square fonts may come in a future release.

After installing BMFont, you must adjust your Font Settings and Export Options as shown below. They can be reached from the Options button on the menu bar.

When you're ready to generate a font, press CTRL+S and save it to your filesystem.

Font Settings

Your Font Settings should be set as follows.

The Size (px), Match char height, Bold, Italic, and Font smoothing options can be set to whatever you desire. Although these settings are what I recommend using, you may need to play around and adjust a few things to get some fonts to render nicely. Beware, the Font smoothing setting can cause aliasing when rendering fonts with small Size (px) values.

Export Options

Your Export Options should be set as follows.

Additional Characters

To include all characters, available to your chosen font, when generating the font:

  1. Click the first option in the right-hand list of Unicode blocks.
  2. Hold SHIFT and click the last option in list.
  3. Right-click anywhere in the list.
  4. Click Select marked subset(s)

Graphic Tiles

Unlike character-based fonts, graphic fonts must be created either by hand or by a program such as TexturePacker. As with character-based fonts, graphic fonts require a PNG sprite sheet and a FNT file that defines the location of each sprite in the sheet.


FNT File Format

Each line of a FNT file defines the Unicode character ID, coordinates, and dimensions of a sprite on the PNG sprite sheet. An example FNT file can be found here and the corresponding PNG file can be found here.

Value Description
char id A Unicode integer value used to reference the sprite.
x The x-axis pixel location, on the sprite sheet, of the top-left pixel of the sprite.
y The y-axis pixel location, on the sprite sheet, of the top-left pixel of the sprite.
width The width of the sprite.
height The height of the sprite.

In a FNT file generated by BMFont, all of the xoffset, yoffset, xadvance, page, and chnl data is ignored. All lines that do not start with "char id=# x=# y=# width=# height=#" are also ignored.

The following function generates a valid FNT file. If you're going to use a FNT file generated by this function, you'll want to manually set the char id values to match-up with the sprites in your PNG file. You must also set the image and sprite dimensions to match those used by your PNG file.


Imagine a PNG file with two sprites and a FNT file with two lines defining the sprites.

The first sprite is defined by char id=32 x=0 y=0 width=32 height=32.

The second sprite is defined by char id=33 x=32 y=0 width=32 height=32.