askvity

How do I add custom fonts to TouchGFX?

Published in TouchGFX Fonts 2 mins read

To add custom fonts to TouchGFX, simply place the font in the assets/fonts/ folder within your TouchGFX project directory.

Adding your own fonts allows you to customize the look and feel of your user interface beyond the standard options. TouchGFX makes this process straightforward.

Steps to Add Custom Fonts

Here's a simple breakdown of how to integrate your preferred fonts:

  1. Locate Your Project: Navigate to the root directory of your TouchGFX project. This is typically where your .touchgfx file is located.
  2. Find the Fonts Folder: Inside your project directory, you will find an assets folder. Inside the assets folder, there should be a fonts subfolder. The path looks like YourProjectName/assets/fonts/.
  3. Copy Your Font File: Place your font file (e.g., .ttf, .otf) directly into the assets/fonts/ folder.
  4. Restart TouchGFX Designer (If Necessary): If TouchGFX Designer was running when you added the font file, you must restart the Designer application. This allows it to rescan the assets/fonts/ directory and recognize the new font file.

Once these steps are completed, your custom font will be available for selection within the TouchGFX Designer when you are configuring Typography settings for texts and widgets.

Using the Custom Font in TouchGFX Designer

After adding the font file and restarting the Designer, you can use it:

  • Open TouchGFX Designer.
  • Go to the Typography section (usually found in the bottom left pane).
  • Click the "+" button to add a new typography.
  • In the settings for the new typography, you will now find your newly added font listed in the font selection dropdown menu.

By following these steps, you can easily enrich your TouchGFX application with unique typographical styles.

Related Articles