fonts

One of the ways you would likely want to customize your Raspberry Pi 4 image are adding assets like fonts, which could be shared by multiple applications that are integrated into the project.

General integration approach

The following general approach was used to download and integrate fonts:

  1. Add a Makefile target to clone a fonts repo, or in some cases, download a release package generated from the repo. Sometimes the latter is faster, depending on the size of the repo and its change history.

  2. Unpack the fonts package into a folder, if required. Note that it is best to use the folder name of the unpacked package, or the repo folder, as the target name, such that the download will not repeat if a previous build completed the download. This is more efficient, but it also means you need to perform a clean operation with make to forcibly update the contents, if it comes from a git repo.

  3. Add a Makefile target to copy the downloaded fonts to the ttf_otf fonts folder. This folder is included as a whole into the following locations on the Raspberry Pi 4:

    • /system/share/fonts
    • /usr/share/fonts

  4. Add the new make target for the fonts being integrated as a dependency to the all target, so that it builds by default.

    To ensure the fonts are properly installed, the startup script updates to refresh the font cache on boot.

  5. Finally, to ensure the new fonts and related artifacts are properly cleaned, add the names of all downloaded artifacts, unpacked folders, and newly created folders to the clean target.

Font integrations

fontconfig

The /system/etc/fontconfig folder for the Raspberry Pi 4 is generated as follows:

  1. The fonts engine package is installed from QNX Software Center to integrate the base fontconfig binaries and configuration
  2. The fontconfig files are downloaded from the QNX ports fontconfig repository on GitHub: https://github.com/qnx-ports/fontconfig.git)
  3. Any font packages with their own fontconfig files are mixed in with the conf.avail folder from the above download.
  4. A conf.d folder that contains soft links to all files in conf.avail is generated and then the local fontconfig folder is imported into the image.

DejaVu Fonts

The currently available QSTI includes some DejaVu fonts, so integrating these fonts was a natural starting point. The repository where these fonts are located also included some additional DejaVu fonts for international characters and math symbols, so these fonts have also been integrated.

The DejaVu fonts site, where you can go obtain the latest fonts is: https://dejavu-fonts.github.io/

The Makefile currently downloads version 2.37 of the font sets.

Google Fonts

Google has sponsored the creation of many useful free fonts for mobile platforms and web applications.

The Google Fonts website, where you can browse to find fonts of interest, is: https://fonts.google.com/

The repo containing the source fonts is found here: https://github.com/google/fonts/tree/main

The Makefile is currently downloading the zip distribution of this repo, which downloads and unpacks faster than cloning the git repo.

Note that, unlike the DejaVu fonts, Google fonts in the repo downloaded are mainly variable True Type fonts. Depending on the naming scheme, certain attributes can be adjusted after loading with either the FreeType or SDL_ttf APIs. Static versions of the fonts are only available to download manually from the Google Fonts site, or in an automated fashion via Google APIs that require an API key to access. QNX chose not to obtain fonts this way for simplicity, but those of you who extend this project are free to change how to obtain Google fonts for your own build variant.

Example integration: Roboto fonts

Let's review the integration steps for the Roboto fonts in the Makefile in more detail, as you may want to integrate additional fonts from this large set or follow the approach for integrating another font set.

  1. First, add a target to the Makefile to download the google_fonts package:

    google_fonts:
    wget https://github.com/google/fonts/archive/main.zip
    unzip main.zip
    mv fonts-main google_fonts
    $(RM_HOST) -rf main.zip

    This example renamed the folder to differentiate that it was from Google.

  2. The above excerpt also unpacks the fonts package into a folder. Note that the target name matches the folder name of the unpacked package (when the version value is expanded). The zip file downloaded is also deleted to avoid a remnant package remaining and complicating a rebuild after cleaning.

  3. Add the following target to copy the Roboto fonts to the folder that is integrated into the system partition:

    google_roboto: google_fonts
    cp google_fonts/ofl/robotomono/RobotoMono-Italic[wght].ttf ttf_otf
    cp google_fonts/ofl/robotomono/RobotoMono[wght].ttf ttf_otf
    cp google_fonts/apache/robotoslab/RobotoSlab[wght].ttf ttf_otf
    cp google_fonts/axisregistry/tests/data/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/robotoserif/RobotoSerif-Italic[GRAD,opsz,wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/robotoserif/RobotoSerif[GRAD,opsz,wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/roboto/Roboto-Italic[wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/roboto/Roboto[wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/robotoflex/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf ttf_otf
    cp google_fonts/ofl/robotocondensed/RobotoCondensed-Italic[wght].ttf ttf_otf
    cp google_fonts/ofl/robotocondensed/RobotoCondensed[wght].ttf ttf_otf

    Note that this target depends on the google_fonts target, ensuring it's satisfied first to download the font set before proceeding to integrate the Roboto fonts.

    You can add similar targets for any other Google fonts that you want to integrate.

  4. Add the new target as a dependency to the all target:

    all: setup_dirs dejavu-fonts-ttf-$(DEJAVU_VERSION) dejavu-lgc-fonts-ttf-$(DEJAVU_VERSION) google_roboto fontawesome-free-$(FONT_AWESOME_VERSION)-desktop setup_confd

  5. Finally, add the newly downloaded artifacts, unpackaged folders, and newly created folders to the clean target:

    clean:
	$(RM_HOST) -rf dejavu-fonts-ttf-$(DEJAVU_VERSION)* dejavu-lgc-fonts-ttf-$(DEJAVU_VERSION)* fontawesome-free-$(FONT_AWESOME_VERSION)-desktop* fontconfig ttf_otf *_fonts fonts-main main.zip

    Note that just in case the project build is interrupted during the execution of targets, that may be renaming or deleting packagesand folders, it is good practice to add interim artifact names to the clean target as well, to account for these situations.

Font Awesome Desktop Fonts (free edition)

Font Awesome is best known for their web fonts and provide a great collection of useful icons for web application user interfaces. Their web fonts are also available for the desktop as well. Three of their OpenType fonts are available for free download from their website: https://docs.fontawesome.com/desktop/setup/get-started

Go to this page: https://fontawesome.com/icons to browse the icons available in the fonts. The font code represents the unicode character represented by that icon's character in the font that contains it. You'll need that information to assemble the unicode or UTF-8 string to render the icon, once it is installed in the image.

Note that the Pro icons are only available in the Pro fonts that are only available after you purchase a license.

OpenType fonts contain True Type fonts, so they are supported by the FreeType library integrated into the QSTI.

Other Sources for Free Fonts

There are a number of sources of open source and free fonts that can be explored. Here are a few sources that weren't included:

Utilities

showfont

A utility application called showfont was integrated after the SDL_ttf library was integrated. This application allows you to render fonts in different ways, either using the default or custom text and sizes.

This utility is useful to check that integrated fonts are correctly integrated into the image. Refer to the example commands below and associated screenshots, which confirm the integrated fonts are working correctly in your generated image.

Usage:

qnxuser@qnxpi:~$ showfont
INFO: Usage: showfont [-solid] [-shaded] [-blended] [-wrapped] [-utf8|-unicode] [-b] [-i] [-u] [-s] [-outline size] [-hintlight|-hintmono|-hintnone] [-nokerning] [-wrap] [-fgcol r,g,b,a] [-bgcol r,g,b,a] <font>.ttf [ptsize] [text]

Checking integrated fonts

DejaVu LGC Sans Bold font

Run the following command to confirm that select Greek, Cyrillic and Coptic characters from one of the new DejaVu fonts renders correctly:

showfont -utf8 /usr/share/fonts/DejaVuLGCSans-Bold.ttf 30 "πΦϢ ЂЖϠ Ω"

In the event that this command doesn't work because the special characters pasted aren't preserved, you may need to copy and paste the characters from another source, such as this web page https://www.utf8-chartable.de/unicode-utf8-table.pl.

Once you are successful in executing the command, the following will be displayed on the screen:


sample DejaVU LGC character render screenshot

DejaVu Math Tex Gyre font

Run the following command to confirm that select mathematical symbols from another of the new DejaVu fonts renders correctly:

showfont -utf8 /usr/share/fonts/DejaVuLGCSans-Bold.ttf 30 "∊ ∑ ∓ √ ∞ ∡ ∫ ∰  ≄ ⋃"

In the event that this command doesn't work because the special characters pasted aren't preserved, you may need to copy and paste the characters from another source, such as this web page https://www.utf8-chartable.de/unicode-utf8-table.pl.

Once you are successful in executing the command, the following will be displayed on the screen:


sample DejaVU MathTexGyre character render screenshot

Google Roboto Condensed Italic font

Run the following command to confirm that one of the Google Roboto fonts integrated, specifically the Condensed Italic font, renders correctly.

showfont /usr/share/fonts/RobotoCondensed-Italic[wght].ttf

The following will be displayed on the screen after executing the command:


sample Roboto Condensed Italic render screenshot

FontAwesome GitHub brand icon

Run the following command to test rendering the GitHub icon from the Font Awesome 6 Brands font:

showfont -utf8 /usr/share/fonts/Font\ Awesome\ 6\ Brands-Regular-400.otf 100 
Note:

The GitHub icon isn't preserved in the command above, but should still work if you copy and paste it.

In the event that this command doesn't work because the special character pasted isn't preserved, you may need to use a utility to copy and paste the unicode character f09b in place of the character at the end of the command.

Once you are successful in executing the command, the following will be displayed on the screen:


GitHub icon render screenshot
Page updated: