Using Fonts in Microchip Graphics Suite (MGS)

Last modified by Microchip on 2024/03/29 13:24


Typefaces are sets of characters, symbols, and glyphs that share a common design or style. They are used in text to provide a certain aesthetic appeal and may be used to make the text easier to read. Examples of common fonts include Times New Roman, Arial, and Helvetica. Font refers to the variations in size, weight (like bold or light), style (like italic or oblique), and more of typefaces. They play a crucial role in designing graphical user interfaces where text is used.

MGS enables users to import font assets from most standard font file formats including TTF and OTF.

This guide provides information on how to import, use and configure font assets in an MGS Harmony Composer project.

MGS Harmony Composer Font Manager

The MGS Harmony Composer Font Manager is a utility that enables users to import and manage font assets. It also provides options to configure the assets so they are optimized for the design and the resources available in the target.

Back to Top

Using the Font Manager

Open the Font Manager by clicking Asset > Fonts in MGS Harmony Composer. The following diagram shows the main sections of the Font Manager window. 

Font Manager

  1. Import Font imports font assets from the specified font file. Supported font files are TTF and OTF.

    By default, the Font Manager will let users import fonts from the included OTF files in the MPLAB Harmony framework. These are stored in gfx\middleware\legato\composer\assets\font.

    Users can navigate to their preferred font files to import them into the design. Users must ensure that they have the appropriate license to use the fonts.

  2. The font assets list shows the list of font assets that are imported and available for use.

    Selecting a font in the list will show its information and configuration in the Font Manager.

  3. Font Information shows information about the source font file.

    This information includes the exact number of glyphs used, the total size of the glyph data, and kerning data. These are useful when optimizing the font asset for code size.

  4. Font Options shows available configuration options for the selected font asset. 

  5. Font Range and Preview 

    Font Range enables users to import a specific range of glyphs from a font asset. More information on how to use Font Ranges is described later in this guide.

    Font Preview offers a preview of how the glyphs of the font assets would look based on the configuration.

Back to Top

Using Font Options

Font Options shows available configuration options for the selected font asset. These options enable users to customize the font asset based on the requirements of the GUI design and target platform.

Font Options

Glyph Table Location

Specifies where the generated glyph data is to be stored.

By default, this option is set to Internal Flash, which means that the glyph data is included in the generated firmware code.

An option is available to store in "Internal SRAM" which copies the glyph data to RAM where it can be modified at run-time if needed. This is not a frequently used option.

If external memory locations were added to the design, these locations can be selected. This will store the font glyph data in the output binary or HEX file for the external memory location. 

Data Table LocationShows the location of the font lookup table. 
NameSets a unique name for the font asset. This name is used in the generated C code, so it must use valid characters for C variable names.
SizeSets the point size of the font. 

Enables the antialiased style for the font. 

Antialiased fonts look better but consume more memory versus aliased fonts (8bpp versus 1bpp).

Right to LeftIf enabled, this will indicate that the strings using this font must be rendered from right to left.

Back to Top

Using Fonts with Strings

Strings and Fonts are used in conjunction. String assets must have a specified font to be rendered properly. The String and Font Assets diagram shows how string and font assets are processed by the Graphics Assets Converter (GAC) to generate the string table and font data.

Fonts and Strings Diagram

Back to Top

Glyph Filtering and Ranges

Note that the GAC is only aware of glyphs specified in the composer design. These glyphs are specified by (1) the Glyph Filter or in (2) Font Ranges.

The Glyph Filter checks the string assets in the design to determine what characters were used and adds the glyphs to the Font Glyph data.

Font Ranges lets users specify a range of glyphs to be added to the Font Glyph data.

By default, a standard Latin range of characters is also included in the font assets. The start and end indices are the Unicode values that specify the range of the glyphs.

Glyph Filter and Ranges

Font ranges work well, especially when using run-time strings. Run-time strings are strings that are created at run-time, in application code. This is in contrast to String Assets, which are created in MGS Harmony Composer during design time. Since the GAC does not know what characters are used in run-time strings, specifying a range of characters can ensure that the GAC generates the glyph data for those characters.

For more information about strings, refer to the "Using Strings in Microchip Graphics Suite (MGS)" page.

Back to Top

Design Recommendations

Here are recommendations on how to configure and optimize the Font Assets for the design:

  • The Glyph Filter helps reduce the size of the glyph data by only including glyphs for characters used in the String Assets. If the project only uses String Assets and does not create run-time strings, deleting the default glyph range can help reduce the size of the glyph data.
  • If using run-time strings (i.e., strings created by the application at run-time), make sure that a glyph range that includes all of the characters in the run-time strings is specified in the Font Manager.
  • For languages that require a large glyph set, like most East Asian typefaces, glyph data can be stored in external memory. If there are no run-time strings that use these fonts, use the Glyph Filter to only include the relevant glyphs.
  • Enable antialiased fonts to improve the visual quality of the rendered glyphs. For small-sized fonts and East Asian typefaces, antialiasing is in most cases required for the rendered glyphs to be legible.
  • Note that antialiasing will increase the size of the glyph data by 8x.

Back to Top