How to use getVectorFont :font and :scale?

See https://forums.garmin.com/developer/connect-iq/f/discussion/349473/simple-example-wf-that-shows-a-bunch-of-things

There, the date uses a vector font if available.  Not all fonts are scalable - FONT_TINY isn't scalable but others on the device may be,

jim_m_58 said:

There, the date uses a vector font if available.  Not all fonts are scalable - FONT_TINY isn't scalable but others on the device may be,

Hi Jim,

Thanks for the example. As far as I can see there you also use :face and :size, not :font and :scale. Do you have an idea how :font and :scale works?

It seems none of the standard Graphics.FONT_xxx fonts is scalable, at least they do not have TTFs in the simulator.json files I checked.

When using :face, I have the problem that I want the same font face as used by the standard fonts FONT_MEDIUM, FONT_SMALL and FONT_TINY. Do you maybe know a way to get the font face of those standard fonts in the code?

You can't.  Only some specific fonts are scalable, and only on some specific devices.

Understand, thanks.

So, if I went to keep the font face consistent in my app, I should not mix those standard fonts with vector fonts, but use vector fonts throughout.

I liked the standard fonts for aligning well with the rest of the watches UI.

However, as far as I can see the standard fonts are either RobotoRegular or RobotoCondensedRegular. And where the former is standard, the latter font face seems not present. So if I specify both in this order in getVectorFont, maybe always the right one will be picked.

Hmmm, does not work out as planned. Even when I am getting the fonts ready already in my AppBase.getInitialView(), I then run into Code Executed Too Long in my onUpdate(). It seems the operations I have been doing with the standard fonts (mainly Graphics.getFontHeight, Graphics.getTextDimensions and Graphics.drawText) get more costly with vector fonts.

So, I sacrificed some memory to gain performance and now the vector fonts are working.

However, on the devices I tried, it does not seem possible to really get the same font face as the system fonts. For the watches that use Roboto Condensed, scalable are the RobotoCondensedRegular RobotoCondensedBold, but the system fonts are somewhere in between. Still more on the bold site, but a bit lighter and more elegant than RobotoCondensedBold.

That's a bit of a bummer, because the style of the system fonts does look best in my eyes.

So, the issue was not that the system fonts are a different font face, but their size is different. If you take Graphics.getFontHeight of a system font and feed it into Graphics.getVectorFont with the same font face, the vector font will be bigger. Apart from that for the devices I tested so far, there is a scalable font with the same font face as the system fonts. The font faces for getVectorFont are:

Fenix 8: RobotoRegular
Fenix 8 solar: RobotoCondensedBold
Epix 2 Pro: RobotoCondensedBold
Fenix 7 Pro: RobotoCondensedBold

the-ninth said:

So, the issue was not that the system fonts are a different font face, but their size is different. If you take Graphics.getFontHeight of a system font and feed it into Graphics.getVectorFont with the same font face, the vector font will be bigger

Sorry if this is a dumb question, but would it help to look at the font size for the system fonts in the device reference?

e.g. [https://developer.garmin.com/connect-iq/reference-guides/devices-reference/#f%C4%93nix%C2%AE7xpro]

For example, FONT_XTINY for fenix7xpro is listed as Roboto Condensed, size 19.

If you pass the same size and typeface into getVectorFont, do you get an identical font?

(I have no idea if getFontHeight() would return 19 for FONT_XTINY or not haha. EDIT: I tried in the sim and it returns 21, which means there's at least a chance that using the font size in the device reference *could* work)

FlowState said:

If you pass the same size and typeface into getVectorFont, do you get an identical font?

(I have no idea if getFontHeight() would return 19 for FONT_XTINY or not haha. EDIT: I tried in the sim and it returns 21, which means there's at least a chance that using the font size in the device reference *could* work)

So, in my experience, the Device Reference is often but not always equal to what getFontHeight() returns.

And second, if you pass in the result of getFontHeight() with the same font face into getVectorFont() you do not get a same-sized font, it is a bit larger. I did not test this extensively, but compared the FONT_SMALL on I think the Epix 2 Pro 47mm, and I had to substract 3 pixel from the size passed into getVectorFont to get the same size.

Not sure if the difference between the reference and getFontHeight() is just a mistake, or there is really something else at work. Would be interesting to try if the number from the device reference passed in to getVectorFont() returns the same actual size.

I am now using vector fonts on devices that support them and am quite happy with it. Since I am using vector fonts throughout the app where available, it is actually not that important for me to match the size to the standard fonts.