Garmin Custom Watch Face

December 18th, 2020

Garmin Vivoactive Custom Watch Face
Garmin Venu Custom Watch Face
Garmin Custom Watch Face Printing

I recently spent some time developing a custom watch face for my Garmin Forerunner 245. Because I was mimicking the Apple Watch Nike+ watchface, I needed to import a custom font face for the numbers. Unfortunately, Garmin doesn’t make importing fonts easy, especially on Macs. Here’s how I worked around Garmin’s limitations to build my watch face!

Garmin vivoactive Binary Watch Face. The Garmin vivoactive allows the inclusion of custom code. In this case, it is a custom Watch Face. The goal is a Watch Face that displays the time in binary and contains the other nicities (date, battery, seconds) included in the default Watch Face. I wrote a custom watch face With ConnectIQ. They should really let you post text/image at the same time. Anyway: This is my first crack at writing a face, but it was pretty neat. The SDK for it isnt horrible. It's what you'd expect from a hardware company trying to open up. This is on a VivoActive 3. Feb 6, 2020 - Customize your Fenix, Vivoactive and Forerunner with these swish watch faces.

Limitations

Garmin watches don’t support TrueType, OpenType, or any other modern standards. Instead, they only support .fnt files, an archaic bitmap font format. Garmin recommends BMFont which can convert TTFs to FNTs. Unfortunately, BMFont has some limitations:

It doesn’t support OTF files, and TTF->OTF converters don’t always work well
BMFont doesn’t support Macs

Enter (custom) FontBuilder

FontBuilder is a multiplatform bitmap font generator that supports both TTF and OTF files. It seemed perfect for my needs! Unfortunately, vanilla FontBuilder isn’t quite compatible with Garmin watches. Since FontBuilder doesn’t seem to be actively maintained, I forked FontBuilder with the following changes to add support for Garmin watches:

Fixed Homebrew support by adding /usr/local/lib to the list of libraries in the QT project file.
Added chars count=NUM_CHARS to the output FNT file.
Antialiased by setting RGB values instead of using the alpha channel (which Garmin watches don’t understand). For example, if a pixel should be 75% transparent, I set its ARGB value to 0xFFC0C0C0 instead of 0xC0FFFFFF.

Custom font workflow

Here’s how to use a custom font in your Garmin watch face:

Export a FNT file using my FontBuilder fork
Add the font to your watch face’s resources: <font filename='my_filename.fnt' antialias='true' />
- Make sure to set antialias='true' or your font will look silly
- If you know which glyphs you need for your watch face, you can use the filter attribute: <font filter='0123456789:' ... />
Load your resource in onLayout():

Use your font in onUpdate() by calling dc.drawText(x, y, font, ...):
Rebuild your project for the simulator
If all goes well, you should see your custom font appear in the simulator!

Resources

Enjoyed this post? Follow me on Twitter for more content like this. Or, subscribe to my email newsletter to get new articles delivered straight to your inbox!

The Buck Stops With You

Infrastructure & Business Monitoring

63 Tips for Better Workplace Communication for Software Engineers

Scroll to top

Connect IQ watch face settings can be adjusted in two ways:

1. Directly on the watch, if the watch and the app allows it

To do this, first you need to get to the watch face selection menu on your watch. When you are there and your face of choice is being shown, you will always be presented with the “Apply” option. If the settings on the watch are supported, you will also see another choice “Customize”.

Garmin Vivoactive Custom Watch Face

2. Through a Garmin app

To customize Connect IQ watch faces settings, you will need to use one of the available Garmin tools:

Garmin Express for PC or Mac (http://software.garmin.com/en-US/express.html)
Garmin Connect (iOS or Android)
Garmin Connect IQ (iOS or Android)

Each of these tools has its pros and cons:

Garmin Express

+ You can uninstall the watch face currently active on your watch.

Garmin Venu Custom Watch Face

– You won’t see the results of your changes until you disconnect the watch from the computer, so if you want to try different settings to decide which you like most, this will be somewhat tedious.

Garmin Connect / Connect IQ

+You can see the setting changes effect immediately after you press ‘DONE’ button, which generally makes the adjustments easier and faster. This is much more convenient than with Garmin Express and enough to definitely recommend Garmin Connect Mobile as the preferred option to change the settings.

– You can’t uninstall the currently active watch face, which means you need to switch to another screen on your watch first. This is just the way Garmin has done it and it seems to be one of the most common reasons for users’ frustration judging from the comments they leave on the review pages.