Using More Fonts More Easily in IoT Products

January 14, 2022 | Peter Hoddie, Principal

The fonts displayed on the screen of an IoT product are a key part of its brand, establishing the overall feel of the product. All of Moddable's commercial clients use the custom font support in the Moddable SDK to brand their products. While it has always been possible to incorporate custom fonts into products, it hasn't been easy. That's changing. The Moddable SDK can now automatically generate custom fonts for embedded projects from a standard font file and a short JSON description.

This major advance is possible thanks to a new tool, fontbm. Fontbm converts standard TrueType and OpenType fonts to the bmfont format, which is optimal for many embedded systems.

Read on to see what the Moddable SDK delivers with custom fonts on an inexpensive microcontroller, to learn about the fontbm tool, and to see how this new feature can make it easier to deliver products in multiple languages.

Examples

The video below shows the Moddable SDK rendering 30 different custom fonts on Moddable One, powered by an ESP8266. The fonts are from the open source Google Fonts collection. Notice that they render at high speed, the quality is excellent, and a wide variety of font styles are available. Also notice that the text includes Japanese, Korean, and Russian languages. This technology works with all Unicode characters.

Of course, this same example runs on any device supported by the Moddable SDK, including the ESP32, QCA4020, and Raspberry Pi Pico. The demo is shown on the ESP8266 because it is the least powerful of these devices.

Small Font Data Size

The original TrueType fonts are over 14 MB in size, much more data than many microcontrollers can store. The tools in the Moddable SDK reduce that 14 MB to about 320 KB -- about 11 KB for each font -- for this use on the ESP8266. This small size makes it practical to include several fonts in a project. One way this small size is achieved is by compressing each glyph individually using a technique created by Moddable.

ePaper Support

Another great feature of fontbm is that it can generate monochrome (black and white) fonts. This is essential for black and white ePaper displays and monochrome memory displays. This video shows a selection of Google Fonts on a Moddable Three with an ePaper display. Without fontbm, generating monochrome fonts was much more difficult, so this brings many new creative possibilities to products with ePaper displays.

To learn more about using ePaper displays with the Moddable SDK, check out the blog post "Getting the Most from ePaper Displays".

About fontbm

Fontbm is an open source tool created by Vladimir Gamalyan that runs on macOS, Linux, and Windows – the same platforms used for development by the Moddable SDK. It uses FreeType to convert standard scalable TrueType and OpenType fonts to the bmfont format. This format is the preferred font format for many IoT products because it has the best balance of performance, quality, flash footprint, and RAM use. It is anti-aliased, which is critical for building a user experience with a clean, modern look.

Many tools are available to convert TrueType fonts to bmfont format. Unfortunately, none of them have been available on macOS, Windows, and Linux. One of the best -- Glyph Designer -- is only available on macOS and requires a monthly subscription. Moddable learned about fontbm from a Moddable community contributor, @wilberforce. At the time, fontbm was only available for Windows and Linux, but looked very promising because it had all the conversion features needed by the Moddable SDK.

The Moddable team helped get to get fontbm building for macOS and then worked with the developer to resolve a few issues that impacted use with the Moddable SDK. From there, Moddable integrated fontbm with our tools. The result is a dramatic simplification in the process for creating custom fonts.

Highly Optimized Glyph Atlas

One unique feature of fontbm is that it does the best job of packing the glyphs into an atlas -- reducing the flash footprint of uncompressed bmfonts. Here's a comparison of the glyph altases generated by Glyph Designer and fontbm for the same font.

These two images contain the same glyphs, but thanks to more sophisticated packing, the fontbm version is nearly half the number of pixels (96 x 128 versus 120 x 199). This is a significant improvement for projects working with uncompressed fonts.

Thank You!

Moddable very much appreciates the work of Vladimir Gamalyan, both for creating fontbm and for being so responsive to our feedback. Vladimir is clearly dedicated to making fontbm a high quality, reliable tool.

Converting from TrueType to bmfont Format

Thanks to fontbm integration in the Moddable tools, adding a new font to a project is a simple update to the project's manifest. This manifest fragment adds OpenSans at 19 point in the semi-bold weight:

"resources": {
    "*-mask": [
        {
            "source": "./assets/OpenSans-Semibold",
            "size": 19
        }
    ]
},

Once the manifest is updated the mcconfig and mcrun tools automatically build the fonts needed. They do this by rendering the TrueType font at 19 points, packing it into an image atlas, and compressing the glyphs. A project using Piu uses the font through a Style object, just like any other bmfont:

const titleStyle = new Style({
            font: "semibold 19px Open Sans",
            color: ["blue"]
});

A project using Commodetto accesses the resource directly:

const titleFont = parseBMF(new Resource("OpenSans-Semibold-19.bf4"));

All of the manifest options for font conversion using fontbm are described in the Moddable SDK document "Creating fonts for Moddable applications".

Languages and Localization

Many products are localized for use in a variety of different languages. This requirement makes generating fonts more difficult because storage limits on most embedded devices make it impractical to store a font with all Unicode characters. One technique to reducing the storage requirements of a font is to only include the characters used in the product. Using fontbm with the Moddable SDK, a project can select which characters it wants to include. This allows the bmfont version of a TrueType font to be optimized for each project. This capability is particularly important for languages with thousands of characters, such as Chinese and Japanese.

There are three ways a Moddable project can specify the characters to include in each font:

  1. List all the characters to include. This works well when only a few messages need to be displayed in a particular language.
  2. List the Unicode blocks to include. This is great for selecting languages to support. For example, "Basic Latin" includes the standard ASCII characters, "Latin-1 Supplement" includes characters from ISO 8859-1 commonly used in Western Europe, "Cyrillic" includes characters for writing Russian, etc.
  3. Include the characters used by localization files. The Piu user interface framework in the Moddable SDK supports localization through translation files. This approach limits the characters in a font to those used in the translation files.

These options give developers the power to streamline fonts with exactly the set of characters that their project needs. This capability makes it more practical to display multiple languages in products.

Conclusion

The power of fontbm integrated into the Moddable SDK brings unprecedented simplicity to the creation and use of custom fonts in IoT products. Products have many new options for expressing their brand and character. Please give it a try.

Resources

If you have questions or suggestions, Moddable wants to hear from you. There are many of ways to reach us:

  • GitHub Discussions. This is a great way to tap into the knowledge of the Moddable community and share your findings.
  • Gitter. This is a public chat space dedicated to the Moddable SDK.
  • Twitter. Simple questions (and even some complex ones) can sometimes be answered in a tweet.
  • Email. Reach out to use by email for inquiries about professional services to assist your development.

If you are new to the Moddable SDK or JavaScript on embedded devices, the book "IoT Development for ESP32 and ESP8266 with JavaScript" is a great place to start.

And finally...

It is also possible to render TrueType fonts directly on embedded devices with the Moddable SDK. It opens up even more creative possibilities for type. However, it uses more RAM and CPU power, and requires more code. Moddable has partnered with Monotype to bring scalable fonts to the Moddable SDK. To learn if this is a good option for your product, read the article "Moddable SDK and Monotype Spark offer scalable font rendering on low-cost embedded hardware".