We use early style sheets to import the Inter variable font from our uploaded assets. Our late style sheet, which is externally stored and then imported via the theme pack, sets font styling across all our elements, as well as enabling stylistic set ss02 for the Inter font family.
This works for practically every widget and element we use in our Host applications, besides charts. Charts are stored within a canvas HTML element and as a result there isn’t an obvious way as to how we can control the typography used inside chart to a similar level of customisation that Sass allows us to. Internally, one of our team members reported that the chart font has now changed to something vastly different:
After discussions within the business I have the following reply for you!
Sadly as the system is placing the charts using canvas there are no CSS based controls that can modify the typography as the element is already pixels by the time it is rendered on screen. In the meantime, I have raised a ticket to see if the options for editing the settings can be exposed in the ‘Cosmetics’ panel of the chart editor.
Thanks for responding and going out of your way to get this added in the chart editor, it’ll be a great addition.
In the meantime, I figured out this was happening because the canvas was using the default browser sans serif font, as it would be created before our actual font was loaded in the early style sheet.
Because I had defined font-feature-settings as always being set to ss02 in the late style sheet, and suffixing it with !important as that seems to be the only way to outright overwrite Liberty Create styling, my guess is that the canvas element also forced the canvas font to also use ss02 on Arial.
I fixed it by defining the imported font to use ss02 only inside the early style sheet, and removing the definition from the late style sheet. The canvas element still uses Arial so it would be great if we could replace it with our own imported fonts we upload in assets, but I know this is fundamentally a limitation with canvas elements so it’s easier said than done.
As to why we were even using ss02 stylistic set, we use Inter Variable across our design system, and ss02 has some great accessibility features such as distinct zeroes, tailed eyes and tees, etc.
