Font conversion

Posted on
Page
of 2
/ 2
Next
  • The posted Espruino font converter asks for a "first character," a width, and a height. The information and format for that information are not readily apparent for the font as it appears in a good font creation application that I have. Is there a guide to using the converter for a non-expert?

    Or another way to get a font into the format that Espruino/Bangle requires?

  • Do you mean this font converter? http://ebfc.mattbrailsford.com/

    You supply a single image with all the characters in - maybe like: https://opengameart.org/content/ascii-bi­tmap-font-oldschool

    So then:

    • First character is the number of the first character in the font. So in the example above the first line is !"... (first character being a space). You look it up on http://www.asciitable.com/ and find the character code for space is 32, so put that in
    • Width and height are the size of each character in Pixels. However in the above link it says '5x7', but the image itself is 128x64 pixels, with 18x7 characters. You divide that down and the actual character size in the file (because they're padded out) is 7x9, so that's what you'd have to use.

    However I'd strongly recommend that you use http://www.espruino.com/Font+Converter if at all possible - since does all that for you and can handle antialised fonts as well

  • Thanks! I did mean the Brailsford converter. The other is easier but I must have a font in which two characters (ASCII 255 or lower) are changed to something else. (So I can't use Google fonts.) I can easily do that in a font editor but then how do I convert the altered font using atob or whatever Espruino can use?

    I've been using my own correctly altered font for years and can use that if I can figure the Brailsford out, including creating an image for OpenGameArt to analyze. All of that entails further problems/questions.

    Alternatively, I could try to extract a font from the Bangle, alter it, and put it back, although I don't know how to get it and replace it.

    Further help is requested! I just need a way to produce the code Espruino needs, from my own font or from another that I can alter in the two simple ways.

  • Is converting a font to .woff or .woff2 helpful?

  • I'm not sure I understand why you can't use the Brailsford converter given the instructions I gave above? You just need to create an image which is a grid with each element in the grid being a character.

    It doesn't have anything to do with OpenGameArt - that's just a website where I happened to find an example of the font.

    If you want to use the Font Converter, if you can convert your font such that you can get a css file you can use with a link like <link href="https://fonts.googleapis.com/css2?­family=Roboto:wght@100&display=swap" rel="stylesheet"> then you can host it somewhere and paste that in.

    It's annoying it's not easier with custom fonts, but I've found it a bit difficult to dynamically load and use fonts that are uploaded to a webpage.

  • Thanks again. Some things are still not obvious, sorry! I'll try some local people and get back to you. (My project is unusual but has a long history.)

  • Is a bitmap font the only kind that may be imported?

  • http://www.espruino.com/Font+Converter will import any font that can be loaded in the web browser

    The Brailsford converter needs the font in an actual bitmap file. However you could render any type of font you want into that bitmap yourself.

  • I find now that the emulator works (with imported fonts) but the watch on bluetooth may not, giving an error or two (unrelated to fonts) in the code when the code has not changed from what was working in the emulator.

    Is that a familiar problem, I wonder.

  • Another question is why an installed font's specially created characters (in one case, well under ASCII 100) don't appear in the emulator or on the watch. The font has been converted in the Font+Converter and installed in the Espruino IDE. Is further action required? (Using an Apple computer and Chrome.)

    Thanks for the help!

  • What is the firmware version on your Bangle at the moment?

    Support for antialiased fonts (>1bpp) only got added in 2v08 so that could be your problem?

    giving an error or two (unrelated to fonts)

    I'd need to see those errors to be any real help. If there were no errors before, and now there are errors after changing the font, they're likely related even if it doesn't seem like it.

    Another question is why an installed font's specially created characters

    Could share the font and what you expect to see, and maybe I could be some help?

  • I've spent much of the last four days trying to get the converter and emulator (and watch) to do what I need, working with my webmaster. I've tried many fonts in four formats and have placed the two characters I need in many places in the fonts, in high and low ASCII. My font editor now shows the characters in the attached font in the positions of A (65) and B (66), as well as in ASCII 174 and 169. In the converter I've specified all ASCII, lower ASCII, and ASCII capitals; 1 bpp, 2 bpp, and 4 bpp. The emulator and watch running the javascript with the converter's data still show the characters A and B, not the characters that replaced them.

    Are we doing something fundamentally wrong? Perhaps the font simply isn't being loaded? (I realize that would be hard for you to know. But if you can load it and see the correct characters, then we'll know something.)

    We have 2v08 on the watch.


    1 Attachment

  • Thanks - Please could you upload the code you're running on the watch/emulator? It'd help me figure out if it's an issue with how the font is converted, or if the font is somehow not getting loaded correctly?

  • At present the code is the attachment, with ASCII 32–127 and 1 bpp. (ASCII 32–255 will be preferable, and higher bpp if that makes sense.) The g.setFontCustom statement is in two places, with better results in the first. You'll see my coder has included a different g.setFontCustom statement, which does not work with this font. Of course, only one such statement is active at a time.

    We'll certainly appreciate your suggestions.


    1 Attachment

  • Thanks - I just uploaded your code, with this extra code which dumps every character:

    for (var y=0;y<16;y++)
      for (var x=0;x<16;x++)
        g.drawString(String.fromCharCode(x+y*16)­, x*15, y*15);
    

    And I see the attached - so it's definitely not including the custom characters you wanted - it just looks like a normal font to me. I've just re-run the font converter on the font you supplied in the size you want at 2bpp - try this code:

    // Actual height 15 (15 - 1) 
    var widths = atob("BAUJCQkQDwQFBQkJBAUEBAkJCQkJCQkJCQ­kEBAkJCQcNCQkMDAoJDA0FBgwKEA0NCQ0MCAsMDB­AMDAwFBAU=");
    var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAQAv­/49AGpQGAAAAAAAAAAAAAAAAAD/AAAAVAAAAFUAA­AD/AAAAAAAAAAAAAAAAAAAAAAUAAAJGFAAH7/wA/­+oAAAJGBAADr/wA/+oAAEJGAAABQAAAAABQAH+AL­ADX4AkGlfVaRpW9WkGAPlwA4B/0AAABQAAAAAAAA­AAAABUAAAC/QAAAgIAAAUCACQDqgHQAfgeAAAAoA­AAB0AAACgL0ALQKrAFACAUAAAgIAAAL+AAAAVAAA­AAAAAAAAAAAC+AAKDn4AO+ALAFDwA0AgvAMAPx8G­AAQH2AAAAfQAAAJ+AAFYC0AB4AOAAYACQAFAAgAA­AAQAAAAAAD/AAAAVAAAAAAAAAAABQAAB//9AHkAF­8FAAAAAAAAAAAAAAAGAAABAflBbgAb/9AAAAAAAA­AAAAGFAAAA3QAAAVUAAAOrAAAAMAAAACAAAAAAAA­AAAAAAAAAAAAAADAAAAAwAAAAcAAAD//AAAAwAAA­AMAAAADAAAAAAAAAAAYAAAAPAAAAB/AAAAAAAABA­AAACgAAAAoAAAAKAAAABQAAAAAAAAAALAAAADwAA­AAEAAAG+AABvkAAb5AAAuQAAAAAEAAAG//QAHlVu­ACAAAgBQAAFAMAAHAC/qvQAG/+AAAAAAAAAAAAAF­AAEACAACAC6qqwA///8AAAACAAAAAQAAAAAAAAAA­AAQAAwAYAA8AMAAnAHABxwA5HwcAL/gHAAZABwAA­AAkAAAAAAAAABQAEAAcAMAQCQDAcAUB0LAMAP8+t­AAUH9AAAAAAAAAAAAAAHgAAAH4AAAKKAAANCgAAe­V9UAf///AAACgAAAAUAAAAAAAAAABgAAAAMABuAB­QDjwAgA0PQYANB/8ADQCkAAQAAAAAAAAAAAGkAAA­v/0AAuYHAAsMAUAcDAJAIA9bACAH/ABAAEAAAAAA­ABgAAAA0AAAANAALADQAtAA0B4AANHgAADuAAAA4­AAAAAAAAAAAAEAAP0f0AOfZHAFA8AUBQLwIAOafb­AB+C/AAAAAAAAAAAAAFAAUAP9AIANHwCAFAMDABQ­DHQAOSbgAB//QAABlAAAAAAAAAAAAAAAHQsAAC0P­AAAEAQAABAYAAC0PAAAdB/AAAAAAAAAAAAAB0AAA­A/AAAAc0AAAKKAAADAwAACgOAAA0BwAAAAAAAAAA­AAAOKAAADigAAA4oAAAOKAAADigAAA4oAAAOKAAA­AAAAAAAAAAA0BwAALA4AAAwcAAAKKAAABzAAAAPw­AAAB0AAAAAAAAAAAADAABgA0D49AOB0BAAq8AAAA­UAAAAAAAAAC/gAAH6vQAHQAsADQGSgBgf+MAUdBi­QFKAgkBRm9IAIf5iAChAIgAKAYAAAbkAAAAAAAAY­AAAAcAGkAHAL/QBweR8AccAHAHYABwB4AAkAYAAQ­AAAAAAAAAAAAC/QoAC68/wAwDgdAUAwDAGAEAgA0­AAQAFAAAAAAAAAAAakAAA//wAA9RvAA4AB4AMAAD­AFAAAkBQAAFAUAABACAAAwA4AA8AFQAUAAAAAABQ­AAIAeqqrAH///wBgAAMAYAACACAAAgAwAAIAKAAK­AA4ALAAH//QAAb+AAAAAAABQAAIAeqqrAH///wAg­GAcAUAgCAGAYAgBwfgIAeAADAAAAGgAAAAAAUAAC­AHqqqwB///8AIBgDABAIAQBgGAAAYH4AAHgAAAAA­AAAAAAAAAAH/0AAL//QALgA9ADQACwBgAAMAUAAB­QFAAAUBQAgIAMAPrAD0D/gABAgAAUAACAH///wB/­//8AYAgCAAAIAQAACAAAAAgAAAAIAABQCAIAer6v­AD///wBgAAIAAAABABAAAQBlVVcAf///AHqqqwBQ­AAIAAAAAEBAAAAB1VVVQP///8HVVVUBQAAAAUAAC­AH///wB///8AYB0CAAB/QAABh9AAFgD0AHgAPgBw­AA8AUAADAAAAAQAAAAAAUAACAHqqqwB///8AYAAH­ABAAAgAAAAIAAAACAAAAAwAAABoAAAAAABAAAgBg­FVsAf6pbAC/QAgAC/QAAAC/QAAAC/QAAAD4AAAHg­AAAZAAABkAEALlVXAH///wBlVVsAEAACAAAAAAAQ­AAEAYAACAH///wAvAAMAC8ABAAHwAAAAfAAAAB9A­AAAH0ABQAfQAdAB+AH6qqgBQAAAAAGpAAAP/8AAP­lvwANAAeAGAAAwBQAAJAUAABQGAAAgA4AAYAH0Bt­AAf/9AAAv4AAAAAAAFAAAgB///8Af///AFAAAgAg­CQEANAwAAC/4AAAL4AAAAAAAAAAAAAAB/9AAC//0­AC0AfQAwAAsAUAACAFAAAYBQAAHQMAAC8C0ADnAP­6vwgAv/QAAAVAABQAAIAeqqrAH///wBgCAMAYAwB­ADAfQAA+t/AAH+C9AAFAHwAAAAMAAAACAAAAAAAG­QBoAL/AHACC8AkBQLQFAUA8DAHQL/QAAAfQAAAAA­ALQAAABgAAAAYAABAGAAAgB///8AeqqvAGAAAgBg­AAAAYAAAALgAAAAAAAAAUAAAAHVVUAB///wAdVVv­ABAAAwAAAAJAAAACQAAAAgBQAAYAf//4AGQAAAAA­AAAAUAAAAHQAAAB/gAAAa/0AAAB/4AAAAv8AAAAu­AAAG0ABQuQAAf0AAAHQAAAAQAAAAUAAAAHQAAAB/­gAAAZ/0AAABv4ABgAf8AfQAuAH/h4AAR/0AAUtv0­AH0AvwBgAGkAABuAAFLkAAB9AAAAYAAAAFAAAgB0­AAcAfQAfAG+AoQAC90AAAH4AAACvgAASgvUAfQB/­AHAADwBgAAMAAAABABAAAABgAAAAPAAAAH9AAAAX­4AIAAL//AAAv/wAAoAIAV0AAAHgAAABgAAAAAAAA­AAAAAQB4AAsAcAA/AGAB9wBgC9MAYD8CAGH4AwBr­0AMAfwADAHgAAwAQAB4AAAAAAAAAAAB////wVVVV­UIAAAAAAAAAAf4AAAAG+QAAABvkAAAAbQEAAAABA­AAAAv///8BVVVVAAAAAA==");
    var scale = 1; // size multiplier for this font
    g.setFontCustom(font, 32, widths, 16+(scale<<8)+(2<<16));
    

    However I notice the custom characters are just upside-down numbers? Did you know you can use g.setFontAlign(...) to specify a rotation? So you could use a normal font, and just use Espruino to rotate it for you automatically?


    1 Attachment

    • screenshot (1).png
  • Thanks for all that. The code you include there doesn't produce the characters for A and B in my emulator, just A and B themselves. Did it do something different when you tried it?

    We need both 2 and 3 in their usual positions and also rotated in other positions, preferably ASCII 174 and 169, or 65 and 66 if higher ASCII doesn't work. In the font I posted, the rotated characters are in all those positions.

    I'll pass your note about rotation to my coder. I don't know how to do any of this myself.

    But: is it possible to load the font and have the substituted characters read correctly?

  • P. S. A tip would be appreciated on how to rotate a numeral and place it elsewhere. We don't want to rotate the 2 or 3 in its own place, much less the entire font :-)

  • This code works fine for me - see attached:

    var widths = atob("BAUJCQkQDwQFBQkJBAUEBAkJCQkJCQkJCQ­kEBAkJCQcNCQkMDAoJDA0FBgwKEA0NCQ0MCAsMDB­AMDAwFBAU=");
    var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAQAv­/49AGpQGAAAAAAAAAAAAAAAAAD/AAAAVAAAAFUAA­AD/AAAAAAAAAAAAAAAAAAAAAAUAAAJGFAAH7/wA/­+oAAAJGBAADr/wA/+oAAEJGAAABQAAAAABQAH+AL­ADX4AkGlfVaRpW9WkGAPlwA4B/0AAABQAAAAAAAA­AAAABUAAAC/QAAAgIAAAUCACQDqgHQAfgeAAAAoA­AAB0AAACgL0ALQKrAFACAUAAAgIAAAL+AAAAVAAA­AAAAAAAAAAAC+AAKDn4AO+ALAFDwA0AgvAMAPx8G­AAQH2AAAAfQAAAJ+AAFYC0AB4AOAAYACQAFAAgAA­AAQAAAAAAD/AAAAVAAAAAAAAAAABQAAB//9AHkAF­8FAAAAAAAAAAAAAAAGAAABAflBbgAb/9AAAAAAAA­AAAAGFAAAA3QAAAVUAAAOrAAAAMAAAACAAAAAAAA­AAAAAAAAAAAAAADAAAAAwAAAAcAAAD//AAAAwAAA­AMAAAADAAAAAAAAAAAYAAAAPAAAAB/AAAAAAAABA­AAACgAAAAoAAAAKAAAABQAAAAAAAAAALAAAADwAA­AAEAAAG+AABvkAAb5AAAuQAAAAAEAAAG//QAHlVu­ACAAAgBQAAFAMAAHAC/qvQAG/+AAAAAAAAAAAAAF­AAEACAACAC6qqwA///8AAAACAAAAAQAAAAAAAAAA­AAQAAwAYAA8AMAAnAHABxwA5HwcAL/gHAAZABwAA­AAkAAAAAAAAABQAEAAcAMAQCQDAcAUB0LAMAP8+t­AAUH9AAAAAAAAAAAAAAHgAAAH4AAAKKAAANCgAAe­V9UAf///AAACgAAAAUAAAAAAAAAABgAAAAMABuAB­QDjwAgA0PQYANB/8ADQCkAAQAAAAAAAAAAAGkAAA­v/0AAuYHAAsMAUAcDAJAIA9bACAH/ABAAEAAAAAA­ABgAAAA0AAAANAALADQAtAA0B4AANHgAADuAAAA4­AAAAAAAAAAAAEAAP0f0AOfZHAFA8AUBQLwIAOafb­AB+C/AAAAAAAAAAAAAFAAUAP9AIANHwCAFAMDABQ­DHQAOSbgAB//QAABlAAAAAAAAAAAAAAAHQsAAC0P­AAAEAQAABAYAAC0PAAAdB/AAAAAAAAAAAAAB0AAA­A/AAAAc0AAAKKAAADAwAACgOAAA0BwAAAAAAAAAA­AAAOKAAADigAAA4oAAAOKAAADigAAA4oAAAOKAAA­AAAAAAAAAAA0BwAALA4AAAwcAAAKKAAABzAAAAPw­AAAB0AAAAAAAAAAAADAABgA0D49AOB0BAAq8AAAA­UAAAAAAAAAC/gAAH6vQAHQAsADQGSgBgf+MAUdBi­QFKAgkBRm9IAIf5iAChAIgAKAYAAAbkAAAAAAAAY­AAAAcAGkAHAL/QBweR8AccAHAHYABwB4AAkAYAAQ­AAAAAAAAAAAAC/QoAC68/wAwDgdAUAwDAGAEAgA0­AAQAFAAAAAAAAAAAakAAA//wAA9RvAA4AB4AMAAD­AFAAAkBQAAFAUAABACAAAwA4AA8AFQAUAAAAAABQ­AAIAeqqrAH///wBgAAMAYAACACAAAgAwAAIAKAAK­AA4ALAAH//QAAb+AAAAAAABQAAIAeqqrAH///wAg­GAcAUAgCAGAYAgBwfgIAeAADAAAAGgAAAAAAUAAC­AHqqqwB///8AIBgDABAIAQBgGAAAYH4AAHgAAAAA­AAAAAAAAAAH/0AAL//QALgA9ADQACwBgAAMAUAAB­QFAAAUBQAgIAMAPrAD0D/gABAgAAUAACAH///wB/­//8AYAgCAAAIAQAACAAAAAgAAAAIAABQCAIAer6v­AD///wBgAAIAAAABABAAAQBlVVcAf///AHqqqwBQ­AAIAAAAAEBAAAAB1VVVQP///8HVVVUBQAAAAUAAC­AH///wB///8AYB0CAAB/QAABh9AAFgD0AHgAPgBw­AA8AUAADAAAAAQAAAAAAUAACAHqqqwB///8AYAAH­ABAAAgAAAAIAAAACAAAAAwAAABoAAAAAABAAAgBg­FVsAf6pbAC/QAgAC/QAAAC/QAAAC/QAAAD4AAAHg­AAAZAAABkAEALlVXAH///wBlVVsAEAACAAAAAAAQ­AAEAYAACAH///wAvAAMAC8ABAAHwAAAAfAAAAB9A­AAAH0ABQAfQAdAB+AH6qqgBQAAAAAGpAAAP/8AAP­lvwANAAeAGAAAwBQAAJAUAABQGAAAgA4AAYAH0Bt­AAf/9AAAv4AAAAAAAFAAAgB///8Af///AFAAAgAg­CQEANAwAAC/4AAAL4AAAAAAAAAAAAAAB/9AAC//0­AC0AfQAwAAsAUAACAFAAAYBQAAHQMAAC8C0ADnAP­6vwgAv/QAAAVAABQAAIAeqqrAH///wBgCAMAYAwB­ADAfQAA+t/AAH+C9AAFAHwAAAAMAAAACAAAAAAAG­QBoAL/AHACC8AkBQLQFAUA8DAHQL/QAAAfQAAAAA­ALQAAABgAAAAYAABAGAAAgB///8AeqqvAGAAAgBg­AAAAYAAAALgAAAAAAAAAUAAAAHVVUAB///wAdVVv­ABAAAwAAAAJAAAACQAAAAgBQAAYAf//4AGQAAAAA­AAAAUAAAAHQAAAB/gAAAa/0AAAB/4AAAAv8AAAAu­AAAG0ABQuQAAf0AAAHQAAAAQAAAAUAAAAHQAAAB/­gAAAZ/0AAABv4ABgAf8AfQAuAH/h4AAR/0AAUtv0­AH0AvwBgAGkAABuAAFLkAAB9AAAAYAAAAFAAAgB0­AAcAfQAfAG+AoQAC90AAAH4AAACvgAASgvUAfQB/­AHAADwBgAAMAAAABABAAAABgAAAAPAAAAH9AAAAX­4AIAAL//AAAv/wAAoAIAV0AAAHgAAABgAAAAAAAA­AAAAAQB4AAsAcAA/AGAB9wBgC9MAYD8CAGH4AwBr­0AMAfwADAHgAAwAQAB4AAAAAAAAAAAB////wVVVV­UIAAAAAAAAAAf4AAAAG+QAAABvkAAAAbQEAAAABA­AAAAv///8BVVVVAAAAAA==");
    var scale = 1; // size multiplier for this font
    g.clear(1);
    g.setFontCustom(font, 32, widths, 16+(scale<<8)+(2<<16));
    
    for (var y=0;y<16;y++)
      for (var x=0;x<16;x++)
        g.drawString(String.fromCharCode(x+y*16)­, x*15, y*15);
    

    1 Attachment

    • screenshot.png
  • P. S. A tip would be appreciated on how to rotate a numeral and place it elsewhere.

    I'm not sure I understand? This code does what you see in the attached.

    g.clear(1);
    // set the font you want
    g.setFont("Vector", 30);
    // Rotate it 180 degrees, center it
    g.setFontAlign(0,0,2);
    // draw, middle of screen
    g.drawString("123", 120,120);
    // and return to right way up
    g.setFontAlign(0,0,0);
    g.drawString("123", 120,100);
    

    1 Attachment

    • screenshot (2).png
  • Much appreciated. The emulator now shows the font design you attached, but running the calendar and clock with the code you attached doesn't show the two rotated digits. I'm passing all this to my coder, who can probably see what to do.

  • While waiting for my coder to work on this, would you print here the exact link href that you put into the font converter to get the resulting code that works correctly? I probably don't have the correct input, and we'll need to try other fonts as well. Thank you!

    I assume you used size 16, 2 bpp, and ASCII 32–127 capitals only.

  • I assume you used size 16, 2 bpp, and ASCII 32–127 capitals only.

    Yes, that's correct. You need to host the OTF and a CSS file for it somewhere.

    However I have now changed the page so all you have to do is paste the URL of a OTF file.

    It's worth checking the Chrome Developer Console if it's not working though, because if you're serving off somewhere that doesn't include a header that allows files to be loaded from other websites the browser won't be able to load it.

  • Thanks—I've forwarded that to my colleague. It would still be welcome to see a sample input in the font converter field that you've found will produce code that works (that the emulator uses to show the two rotated numerals)—because my inputting just the URL for the OTF still brings the wrong results, a font with no rotated characters.

  • Did you check the dev console to see if it was loading the font URL you pasted without errors?

    I've tested it here - you'd just need something like https://your.website/New Font.otf, but I'm not going to upload your font file for you so I can give you a link.

  • Sorry, I understand. Through various means I've now managed to get this to work. Before long, we'll be pleased to upload the calendar/watch to the app loader, in its phase 1. Phase 2 will bring in many weather data if we can manage.

    Thanks again for your patience and help.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Font conversion

Posted by Avatar for Numerist @Numerist

Actions