bug(web): key previews use incorrect font

[jahorton]

Describe the bug

When pressing a key on a touch form-factor OSK, the key preview uses the incorrect font. Fortunately, the keys and the subkey menu are both fine and do use the correct font - it's just the key preview that's wrong.

The most prominent example I've found so far for this: using the iOS Keyman app and sil_cameroon_azerty, note the difference between the j keycap and its key-preview text:

While the a would be even more obvious, it's extremely difficult to take a screenshot before its longpress menu appears on a phone. Reproducing this on my laptop via app/browser-Web's inlined-OSK feature:

Compare that a to what you see in the two screenshots before it; the difference should be obvious.

Reproduce the bug

1. Load / install sil_cameroon_azerty or sil_cameroon_qwerty.
2. Press and hold the j key.

Other keys - like a - will also work, but note that if the key supports longpresses, it won't remain displayed long.

Expected behavior

The key-preview font should match that of its base key.

Related issues

No response

Keyman apps

• Keyman for Android
• Keyman for iPhone and iPad
• Keyman for Linux
• Keyman for macOS
• Keyman for Windows
• Keyman Developer
• KeymanWeb
• Other - give details at bottom of form

Keyman version

17.0.134-alpha

Operating system

No response

Device

No response

Target application

No response

Browser

No response

Keyboard name

sil_cameroon_azerty

Keyboard version

Current / shouldn't matter

Language name

Any

Additional context

No response

[darcywong00]

Debugging longpress keys on SHIFT:

keyboard.html#showMore-14+keyPos=21,106+keys=default-T_new_206:\u002A\u0041\u006C\u0074\u002A;default-T_new_205:\u002A\u0043\u0074\u0072\u006C\u002A;default-T_new_207:\u002A\u0043\u0061\u0070\u0073\u002A;default-T_new_208:\u002A\u0041\u0042\u0043\u002A;default-T_new_209:\u002A\u0061\u0062\u0063\u002A;default-T_new_210:\u002A\u0053\u0079\u006D\u0062\u006F\u006C\u002A;default-T_new_211:\u002A\u0041\u006C\u0074\u0047\u0072\u002A;default-T_new_212:\u002A\u004C\u0041\u006C\u0074\u002A;default-T_new_258:\u002A\u0052\u0041\u006C\u0074\u002A;default-T_new_259:\u002A\u004C\u0043\u0074\u0072\u006C\u002A;default-T_new_260:\u002A\u0052\u0043\u0074\u0072\u006C\u002A;default-T_new_261:\u002A\u004C\u0041\u006C\u0074\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_262:\u002A\u0052\u0041\u006C\u0074\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_263:\u002A\u0041\u006C\u0074\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_264:\u002A\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_265:\u002A\u0041\u006C\u0074\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_266:\u002A\u004C\u0041\u006C\u0074\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_267:\u002A\u0052\u0041\u006C\u0074\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_268:\u002A\u004C\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_269:\u002A\u0052\u0043\u0074\u0072\u006C\u0053\u0068\u0069\u0066\u0074\u002A;default-T_new_292:\u002A\u0053\u0068\u0069\u0066\u0074\u004C\u006F\u0063\u006B\u002A;default-T_new_293:\u002A\u0053\u0068\u0069\u0066\u0074\u0065\u0064\u004C\u006F\u0063\u006B\u002A

I would expect url to include +font=... to enforce using keymanweb-osk.ttf.

[mcdurdin]

The font data should be available in kmp.json already -- after all, Keyman for Android is passing it in to keymanweb!

[jahorton]

This issue does not appear to exist on the feature-gestures branch; I did put in significant effort to handle related styling in #9825, I believe. Not sure if I can fully credit the fix to that one PR, though.