Font of keyboard layout not used in render

[ifohancroft]

The render uses its own font it seems. It doesn't take into consideration if a custom font is used for the layout. Regardless if the layout is provided via gist link or .json file.

[iandoug]

Hi

At present KLE appears to render in Segoe-UI, at least in the layout I'm building ... no custom fonts.

Apart from issue above, most characters are rendered in Bold in kle_render, but some, typically in the AltGr slots, are rendered in Regular.

There is also a visual difference in sizing ... perhaps the mapping between kle's 9 sizes and pixel size here needs tweaking? Or is it just a consequence of the different fonts?

Lastly, font colour seems a bit random ... this may be because of kle assuming some values are inherited from previous keys...

thanks, Ian

[CQCumbers]

I've just added some limited custom font support in ba3eea6. Part of why I've hesitated to do this is that matching keyboard-layout-editor's behavior for this would almost certainly require using a browser engine to handle styling arbitrary HTML elements with CSS, since that's how custom fonts are specified. Reliably supporting just @font-face rules (no styles or selectors) would be an enormous task, due to the different font format, unicode ranges, fallback fonts, etc.

However, given that other people use this project, having some way to use custom fonts, even if it's inevitably unreliable, is probably better than nothing. Therefore, you can now use @font-face declarations to specify ttf fonts (not woff, like most browsers) and apply them to the builtin .keylabel{0-12} classes. Sizing, unicode ranges, other selectors, etc. are ignored, and no fallback font is provided. An example:

@font-face {
  font-family: Kanit;
  src: url(https://github.com/google/fonts/blob/main/ofl/kanit/Kanit-Regular.ttf?raw=true);
}

.keylabel2, .keylabel8 { font-family: Kanit, sans-serif; }

You may need to fiddle a bit with quotes and other syntax to get your own CSS to work correctly. Hopefully, people using KLE-Render find this good enough to work with, despite the limitations.

[ibrahimasarr]

Hi
I don 't know what I got wrong but I cannot make the CSS to work.
I used this:
@font-face {
font-family: Kanit;
src: url(https://github.com/google/fonts/blob/main/ofl/kanit/Kanit-Regular.ttf?raw=true);
}
.keylabel2, .keylabel8 { font-family: Kanit, sans-serif; }

I get a different font with Unicode keys. Any thoughts? Cheers!

[iandoug]

Kanit does not have a lot of glyphs .. you're getting some fallback font.

https://fonts.google.com/specimen/Kanit#glyphs