Fonts generated with https://snowb.org appear black/empty when loaded in watchface

Hello Wave, been trying to generated some custom fonts with https://snowb.org/ lately since BMFont isn't available for mac os, but every font I generate with snowb when loaded in a watchface appears black/empty/invisible and I can't figure out why. The fnt file looks ok to me and the png file loads correctly and there's no compiler errors.

Wondering if I'm missing something obvious or if anyone else shares the same problem.

Cheers,

Thanos.

  • hi, Im having the same issue. I used to use BMFont on Window but my Windows computer decided to give up on life so I had to move all my dev to Mac. I have tried the snowB.org font generator but no characters display on the garmin. I added some image glyphs to my custom font and they display as they should. fnt file and png file looks ok to me and no compiler errors. There is not a lot of settings in snowB to play around with. running out of ideas...

  • I finally solved my issue. Now both characters and glyphs display properly in the sim. I had to disable "auto pack" in the Layout settings, and enabled "fixed size" instead. I went for 256x256px, but you may need a bigger size if you have more glyphs. Use a multiple of 2 (512x512, 1024x1024, etc)

  • hm, still shows black for me after disabling auto-pack and enabling fixed-size

    test.fnt has:

    info face="sans-serif" size=72 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=1,1
    common lineHeight=72 base=66 scaleW=256 scaleH=256 pages=1 packed=0
    page id=0 file="test.png"
    chars count=11
    char id=32 x=0 y=0 width=0 height=0 xoffset=0 yoffset=0 xadvance=21 page=0 chnl=15
    char id=48 x=0 y=0 width=39 height=55 xoffset=0 yoffset=14 xadvance=41 page=0 chnl=15
    char id=49 x=0 y=56 width=22 height=53 xoffset=5 yoffset=14 xadvance=41 page=0 chnl=15
    char id=50 x=23 y=56 width=39 height=53 xoffset=0 yoffset=14 xadvance=41 page=0 chnl=15
    char id=51 x=40 y=0 width=39 height=55 xoffset=0 yoffset=14 xadvance=41 page=0 chnl=15
    char id=52 x=63 y=56 width=39 height=53 xoffset=0 yoffset=14 xadvance=41 page=0 chnl=15
    char id=53 x=196 y=0 width=38 height=54 xoffset=1 yoffset=15 xadvance=41 page=0 chnl=15
    char id=54 x=80 y=0 width=38 height=55 xoffset=1 yoffset=14 xadvance=41 page=0 chnl=15
    char id=55 x=103 y=56 width=38 height=52 xoffset=1 yoffset=15 xadvance=41 page=0 chnl=15
    char id=56 x=119 y=0 width=38 height=55 xoffset=1 yoffset=14 xadvance=41 page=0 chnl=15
    char id=57 x=158 y=0 width=37 height=55 xoffset=1 yoffset=14 xadvance=41 page=0 chnl=15

  • Here is my .fnt file:

    info face="Saira Condensed" size=-50 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0
    common lineHeight=79 base=57 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=0 redChnl=4 greenChnl=4 blueChnl=4
    page id=0 file="saira-condensed-50_0.png"
    chars count=19
    char id=-1   x=0     y=74    width=27    height=79    xoffset=-1    yoffset=0     xadvance=25    page=0  chnl=15
    char id=46   x=204   y=37    width=6     height=79    xoffset=2     yoffset=0     xadvance=10    page=0  chnl=15
    char id=49   x=193   y=37    width=10    height=79    xoffset=1     yoffset=0     xadvance=14    page=0  chnl=15
    char id=50   x=155   y=37    width=18    height=79    xoffset=2     yoffset=0     xadvance=22    page=0  chnl=15
    char id=51   x=174   y=37    width=18    height=79    xoffset=1     yoffset=0     xadvance=21    page=0  chnl=15
    char id=52   x=28    y=74    width=21    height=79    xoffset=1     yoffset=0     xadvance=23    page=0  chnl=15
    char id=53   x=115   y=37    width=19    height=79    xoffset=2     yoffset=0     xadvance=22    page=0  chnl=15
    char id=54   x=94    y=37    width=20    height=79    xoffset=2     yoffset=0     xadvance=24    page=0  chnl=15
    char id=55   x=135   y=37    width=19    height=79    xoffset=0     yoffset=0     xadvance=20    page=0  chnl=15
    char id=56   x=50    y=37    width=21    height=79    xoffset=2     yoffset=0     xadvance=25    page=0  chnl=15
    char id=57   x=72    y=37    width=21    height=79    xoffset=1     yoffset=0     xadvance=24    page=0  chnl=15
    char id=58   x=211   y=37    width=6     height=79    xoffset=2     yoffset=0     xadvance=10    page=0  chnl=15
    char id=97   x=0     y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=98   x=37    y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=99   x=74    y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=100  x=111   y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=101  x=148   y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=102  x=185   y=0     width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    char id=103  x=0     y=37    width=36    height=36    xoffset=0     yoffset=20    xadvance=36    page=0  chnl=15
    kernings count=1
    kerning first=55  second=46  amount=-4  
    

  • For me the issue was that the png filename in the .fnt font file was incorrect. It's not rendering centered, but I might just have to play around with the snowb settings.

  • I use bmGlyph on OSX. https://www.bmglyph.com/

    I have noticed that the font colour did have some influence on whether the font was displayed or not. (It could have been black fonts were "invisible". If it wasn't black then it was white). I just stick with the default gradient fill which is shown on the watch as a single solid colour.

  • bmGlyph looks very nice :) It would be nice if there was a version available for Windows. It looks like Hiero https://libgdx.com/wiki/tools/hiero

    can also do the job. Here's an example of creating an outline style font from a ttf file. The layout of the letters are not in the same order as they would be in bmFont, but it seems to work.

    Yet another option is to use the font builder in Watchface Builder for Garmin – Creating your own watchface app for garmin device without coding

    which I think might be using bmFont in the background.