Custom fonts are driving me crazy!

After a week of heads-down in creating a custom number font I am almost ready to give up. This has taken so much time and effort - you are my last hope.

I'm trying to recreate Bionic font that Fenix 6 uses for FONT_NUMBER_THAI_HOT, to use it on other devices that have a less appealing (too small / doesn't support spaces) system number font.

I'm using BMFont utility, tried all preloaded fonts there and also loaded about two dozen of free fonts I got from around the web... None look the same as Garmin's Bionic font. I'm almost to the point of just creating it myself.

I found Bionic fonts in ConnectIQ/Fonts that were installed along with SDKs, but they are in a hashed .cft format.

Are we allowed to use them?

How do I convert them to true type font format?

Is there a free font that looks like Bionic?

Any help will be immensely appreciated!

Top Replies

All Replies

Shent-Aurkhan (SHN) over 4 years ago

hi mate,

I found this one which is pretty close to Garmin font:

Rajdhani

Joe Berger over 4 years ago in reply to Shent-Aurkhan (SHN)

Oh, dude, you're a life saver! How did I miss that one?

Thank you so much!

MobileDriveway over 3 years ago in reply to Shent-Aurkhan (SHN)

Nice find, thanks!

Do you know any good Outline Fonts, like the ones used on Garmin Instinct 2 watch faces?

jim_m_58 over 3 years ago in reply to MobileDriveway

look at 1001freefonts.com. There's a whole bunch of outline fonts.

MobileDriveway over 3 years ago in reply to jim_m_58

I'm asking because I wasn't able to find any good outline fonts like on the picture here:

jim_m_58 over 3 years ago in reply to MobileDriveway

It could be Garmin's own font and not available. What you may consider is finding a font that looks similar, creating two CIQ fonts, and editing the png for one, just leaving the outline.

InigoTolosa over 3 years ago in reply to MobileDriveway

There's an easy way to create fonts with custom outline/fill colors based on standard fonts provided by Graphics toybox. It can be done using dc functions in runtime. I am using following function for that purpose:

	function myDrawText(dc, x, y, font, text, justification, outlineColor, fillColor) {
		if(outlineColor != Graphics.COLOR_TRANSPARENT) {
			dc.setColor(outlineColor, Graphics.COLOR_TRANSPARENT);
			
			var ds = 1;
			dc.drawText(x - ds, y - ds, font, text, justification);
			dc.drawText(x + ds, y - ds, font, text, justification);
			dc.drawText(x - ds, y + ds, font, text, justification);
			dc.drawText(x + ds, y + ds, font, text, justification);
			
			ds = 2;
			dc.drawText(x, y + ds, font, text, justification);
			dc.drawText(x, y - ds, font, text, justification);
			dc.drawText(x + ds, y, font, text, justification);
			dc.drawText(x - ds, y, font, text, justification);
		}
		
		if(fillColor != Graphics.COLOR_TRANSPARENT) {
			dc.setColor(fillColor, Graphics.COLOR_TRANSPARENT);
			dc.drawText(x, y, font, text, justification);
		}
	}

fillColor = backgroundColor will draw transparent filled text

fillColor = Graphics.COLOR_TRANSPARENT will draw a bold text in full outlineColor

See font for power value in this screenshot from one of my datafields as an example. Of course, it has a costs in terms of computation, but, on the other hand, it makes easy to improve graphics of your app