Looking for a font 5x5 and switched to a 4x5

[espruino-discuss3]

Posted at 2020-11-10 by @MaBecker

I remember it is possible to convert bitmaps into fonts.

Has some been working on a 5x5 font module and like to share it?

[espruino-discuss3]

Posted at 2020-11-10 by @MaBecker

Ok, this is the bitmap to font converter for Espruino

http://ebfc.mattbrailsford.com/

But no luck when searching for a 5x5 font as bmp or jpg file ....

---

Posted at 2020-11-10 by @MaBecker

There are many free ttf files and ttf to bmp converter that generate a useless output for the converter.

---

Posted at 2020-11-10 by @gfwilliams

I think you need an image that's a tile of bitmaps.

Also worth checking out http://www.espruino.com/Font+Converter for working from Web fonts, although it's only really tested with the Google fonts (PRs welcome ;).

At some point, given it's 5x5 you may decide it's easier to make it yourself. It's actually not that painful:

var fontBitmap = Graphics.createImage(`

11111
1   1
1   1
11111


11111



111 1 
1 1 1
1 1 1
1 111

1 1 1
1 1 1
1 1 1
11111`.substr(1)).buffer;

g.setFontCustom(fontBitmap, '0'.charCodeAt(), 5, 5);

g.drawString("0123 3210");

Once you have fontBitmap you can do btoa(fontBitmap) to get the base64 and can turn it into a font module

---

Posted at 2020-11-10 by @MaBecker

Thanks

It is all about using the correct search string :)

Search for 3x5 or. 4x5 will give some nice results for bmp files.

eg this conversation https://graphicdesign.stackexchange.com/questions/91478/a-font-thats-readable-with-a-5px-height

---

Posted at 2020-11-10 by @MaBecker

It's actually not that painful

here we go, first part 0 - Z

exports.add = function(graphics) {

       graphics.prototype.setFont4x5 = function() {
this.setFontCustom(atob("/H4EfAC9egrX4OE+Dtbg/W4IQ+D9fg7X4AKAAKgAiogFKUAioghVAL1UB9Hg/VQHRUD8XA/WoP0oB0Zg+T4AfAAQfA+TYPhCD6Pg/B4HRcD9EAfNwP0WBNZAh+APh+DwfA+L4Nk2DB8AnXIA"), '0', 4, 5);};
};

---

Attachments:

• Bildschirmfoto 2020-11-10 um 22.01.03.jpg

---

Posted at 2020-11-10 by @MaBecker

see attached code

---

Attachments:

• code.js

---

Posted at 2020-11-11 by @gfwilliams

Awesome, thanks! Do you think it's worth pulling that into the Fonts page?

---

Posted at 2020-11-11 by @MaBecker

Sure, I am already working on a Font4x5.js file for a pr :)

Is there a possibility to skip chars with using createImage like lowercase chars?

---

Posted at 2020-11-11 by @allObjects

...looks like the uc Q's 'leg' is on the wrong side? ...and the I should have serifs to be distinct from the vertical / or - bar |

(CH gets to precision, D goes all the way to perfection... haha - @MaBecker, stay safe and have a nice late afternoon - m)

---

Posted at 2020-11-11 by @MaBecker

... oh no ... Thanks!

added some more chars so this is ' ' to '~'

any wishes for 0x7f ?

---

Attachments:

• Bildschirmfoto 2020-11-11 um 17.25.34.jpg

---

Posted at 2020-11-11 by @MaBecker

@allObjects have a great day and stay save too.

---

Posted at 2020-11-11 by @MaBecker

Is there a possibility to skip chars with using createImage like lowercase chars?

Yes there is, I use '\n\n\n' for all unmapped chars

---

Posted at 2020-11-11 by @MaBecker

@allObjects just sharing the latest version so you can go for a nice C

---

Attachments:

• font4x5_source.js