Garmin Custom Watch Face
- Explore and download apps to personalize your Garmin with Connect IQ, our open platform for third-party developer apps.
- Garmin watches are built for sports and fitness activities. Given the conditions outside and everyday use, you may need to buy replacement bands for your unit. To ensure your Garmin model or range has interchangeable bands and how to go about the process, check out its product manual.
- Feb 6, 2020 - Customize your Fenix, Vivoactive and Forerunner with these swish watch faces.
- You can also customize a preloaded watch face or create a new one ( Creating a Custom Watch Face). From the watch face, hold the touchscreen. Select Watch Face. Swipe up or down to scroll through the available watch faces. Tap the screen to select the watch face. Select Apply to activate the displayed watch face.
So, with that in mind, we’re going to design and implement a watch dial in monkey-c and deploy it to Garmin’s IQ store. I wanted the watch face to look like Casio G-Shock because they are awesome, particularly G-LIDE model (GBX100).
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!
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 of0xC0FFFFFF
.
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:' ... />
- Make sure to set
Load your resource in
onLayout()
:
- Use your font in
onUpdate()
by callingdc.drawText(x, y, font, ...)
: - Rebuild your project for the simulator
- If all goes well, you should see your custom font appear in the simulator!