tvOS: Custom Fonts in TVML

My friends at Garage Innovation [

6 years ago

Latest Post The Great Escape Tunnel by Mario Esposito public

My friends at Garage Innovation built an app called Caldo. In a nutshell, they built a sleek way of controlling your building temperature when controlled via NEST Learning Thermostat.

I am not going to review it here as they have done such a good job that I wouldn’t give justice to their efforts, however, what inspired me to write a story about this is a funny roadblock that they found during the development cycle.

Apple TV has two main technologies for building apps:

TVML is a constrained wrapped over HTML with Javascript capabilities. The native implementation of the apps is bundled with the app (storyboards) the TVML instead is hosted and treated pretty much like a web- site that honors the TVML schema.

During the enrollment phase, Caldo provides a short-ned URL that you have to enter on a device that supports a browser (the ATV doesn’t) and that completes the onboarding base. The URL is case sensitive, and the default font on ATV (Apple San Francisco) doesn’t do a good job in representing clearly to the user the difference between letter L and I when in different CAPS.

The result has been that Caldo’s customers were under the impression that they were entering the correct URL to complete the enrollment but instead, they were entering a different casing for some letters. That’s when I was asked in the comment session if I knew a workaround to use custom fonts in TVML as by default the Apple SDK for tvOS doesn’t allow that.

I approached the problem with a mindset of “Oh… This doesn’t seem to be that tricky. It’s probably just some casting problem that they missed” well. As it turned out, it took quite a bit of time investment to figure out the actual solution. I am glad I took on the task as in the process of figuring that part out, I learned quite a bit about the tvOS underlying design.

I looked up if someone had already figured it out and I found this repo, unfortunately, that is built-in ObjC and Caldo is built in Swift. It wouldn’t have been a big deal to build the bridging component, however, the solution was a bit overkill for the given problem and the description that I was given of the Caldo implementation.

The Apple forum (not surprising) didn’t help either however the Shopgate repo pointed me in the right direction as TVElementFactory class is responsible for the parsing of the TVML

The code is here.

Mario Esposito

Published 6 years ago