Pebble Fonts


watch face
Yes, I have orange Pebble :)
2013-11-22

I have been waiting for Pebble for a long time. Now they can finally be shipped to our country too.
And SDK 2.0 came out at the same time. so I have started with it => I cannot compare with previous version.

For me international = Czech fonts are important and as a test project I have made these fuzzy watches in proper Czech language.

It took me lot of googling and then testing, debugging in Python (never used before) to get it well.

To save you time, here is described, how it really works:

1. Patch

Pebble SDK needs patch ! I would like to have it in the next release built in, please.
The patch comes from "fisakov" here: https://github.com/fisakov/pebble-sdk-characterRegex

For me the hard part was to understand that patch, important part is using of "eval" function,
because it converts "string" to "unicode" and without that Python regular expression does not work.

2. Fonts

You have to get proper fonts in TrueType format that support your language.
Mostly in Europe it is Latin Extended A and Latin Extended B.
The former (A) is inside Pebble built-in fonts, the other (B) is NOT present.
I can recommend Roboto font by Google. It is free for use, it has all necessary fonts and it looks
well on Pebble display.
You can find it here: http://www.google.com/fonts/specimen/Roboto ... just click on "Open Roboto in Google Fonts",
there you can check styles (why not all) and character sets you need = "Latin Extended" for Czech e.g.
Download button in right upper part.

The fonts you want to use must be then copied into "resources/fonts" folder in your pebble project.

3. Usage

You have to define your font in "appinfo.json" in "resources/media",
as explained in the Font Guide https://developer.getpebble.com/2/guides/ux-fonts.html

What is NOT explained there is how to select proper characters which you really need.

The TrueType font file is converted into "pfo" format and it can contain up to 256 glyphs. No more!
See patched Python file "Pebble/tools/font/fontgen.py", line 131.

So you MUST select glyphs. You can use now undocumented field of "resources/media", which is "characterRegex".
There you can give Python regular expression for needed characters, but the file "appinfo.json" must remain
pure ascii (7-bit) only, so you must escape unicode fonts ... and that's for mentioned patch is (two files patched, better by hand).

I personally include full standard ascii = 0x20 to 0x7e and these characters: "áåäčćďěéëíǐïĺľňńóöǒřŕšťúůüýžź"
and upper case "ÁÅÄČĆĎĚÉËÍǏÏĹĽŇŃÓÖǑŘŔŠŤÚŮÜÝŽŹ".
For translation into proper escaped format you can use command-line tool from java distribution "native2ascii"
and here is complete result which works for me:

  "resources": {
    "media": [
      {
        "characterRegex": "[ !-~\u00e1\u00e5\u00e4\u010d\u0107\u010f\u011b\u00e9\u00eb\u00ed\u01d0\u00ef\u013a\u013e\u0148\u0144\u00f3\u00f6\u01d2\u0159\u0155\u0161\u0165\u00fa\u016f\u00fc\u00fd\u017e\u017a\u00c1\u00c5\u00c4\u010c\u0106\u010e\u011a\u00c9\u00cb\u00cd\u01cf\u00cf\u0139\u013d\u0147\u0143\u00d3\u00d6\u01d1\u0158\u0154\u0160\u0164\u00da\u016e\u00dc\u00dd\u017d\u0179]",
        "type": "font",
        "name": "FONT_ROBOTO_REGULAR_28",
        "file": "fonts/Roboto-Regular.ttf"
      },

and in your code you can use it as defined in Pebble documentation:

    GFont font = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_ROBOTO_REGULAR_28));

Here you can find and try my Czech fuzzy text watch, if you wish: http://ivo.panacek.cz/pebble/