Font To Bitmap Converter 🛠️
This simple tool allow you to convert fonts (ttf, woff, otf) into bitmap fonts.
You can accomplish it in 4 ways:
- Font upload - you can upload a font file directly from your local files.
- Font URL - you can input the direct URL to the font file.
Example: https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2. - Stylesheet URL - you can input the URL of the stylesheet (css file) that contains the font you want to convert.
Example: https://fonts.googleapis.com/css2?family=Press+Start+2P. - Input autocomplete - you can use the input autocomplete feature to search for a font from Google Fonts by its name.
Exports
You can copy a small code snippets for one of these game engines:
Use this snippet to keep proper characters widths.
Paste received JSON into the 'Spacing data' property of the Sprite Font.
Required: disable "centered" option before downloading bitmap.
Use this snippet to load downloaded bitmap.
Limitations
- Disabling antialiasing in browsers can be somewhat challenging. If you are using Chrome on MacOS, the feature works smoothly with the style -webkit-font-smoothing: none;. However, if you're on a different OS or using Firefox on MacOS, you may need to disable antialiasing at the browser or system settings level. For Firefox, you can turn off antialiasing by navigating to about:config and setting gfx.text.disable-aa to true.
- If you enter URL it will not work if the server has disabled 'cross-domain' requests (CORS); however, all public font providers should have disabled it.
Development log
- v1.4 - general updateMar 01, 2023
- v1.3 - major updateFeb 25, 2023
- v1.2 - general updateJul 16, 2022
- v1.1 - new snippet for Construct 3Jul 09, 2022
Comments
Log in with itch.io to leave a comment.
Hey stmn, idk whether you will update this tool, but I at my ct.js game engine have a solution for font blurriness.
The easy way is rendering the font’s canvas at, say, x4 size and downscaling it by drawing onto another canvas while disabling image smoothing. (MDN docs.) You can also access ImageData and threshold the alpha-channel to remove the remaining blur.
The hard way (that I use in ct.js) is parsing the font file with Opentype.js and drawing the symbols as paths. This eliminates the symbol blurriness problem, but has another issue with 1px-wide lines as they get broken, so I firstly draw everything at x2 size and then downscale it. The results are then perfect and don’t require further filtering.
Hi, thanks for sharing your solutions. Maybe I'll check them one day when I will have more time.
After messing around with a couple different browsers, ironically Firefox is the only one I could get to export without AA. I just followed the tutorial from the link below, all you need to do is...
about:configgfx.text.disable-aato True. (This completely disables AA)Thanks for the great tool, hope this helps, Cheers
https://askubuntu.com/questions/1357140/disable-anti-aliasing-in-google-chrome-o...
Thanks for your solution.
I tried to disable AA from the css styles, but it doesn't seem to work for me - some solutions on the Internet are no longer up to date.
I guess I'll just link your solution in the tool description for now.
I use Chrome on MacOS and it seems that it's the only combination where the option to disable AA from the tool works.
Maybe someone else will suggest another solution, I don't see one for now.
anti-aliasing doesn't seem to do anything. making pixel art fonts, there's way too much anti-aliasing happening that the font looks "blurry". Not sure you can do anything about it.
I'm trying to use a Gothic old english font, very ornate so the anti-aliasing is vast.
The browser controls the anti-aliasing, so my capabilities are limited. However, I just checked that on Firefox, anti-aliasing is enabled by default - that's why turning it on here makes no difference. On Chrome, anti-aliasing is off by default, so on this browser, controlling this option works as intended.
If I diagnosed the problem correctly, try using Chrome. I will further analyze the issue with Firefox and see if it can be fixed.
If you're using Chrome and still see the problem, please send the font and a screenshot of how it looks on your end. I don't see any issue on Chrome.
I am using Chrome, I tried both on and off, both are blurry with every font I use.
I assume its because the font size I need is really small, 16x20 etc...
Great Job!!
Is it possible to automatically remove duplicate characters. For example, when I fill in "AAAA", the repeated "A" is automatically removed.
And when there are a lot of characters, the bitmap will exceed the screen, is it possible to add a scroll view? Thank you!!
Hi, I have very limited time but I will consider every proposition. For now I increased height of an iframe a little. If it is still too small you can use full screen option or https://stmn.github.io/font2bitmap/
Can you put the button in the front so that the iframe can be exported even if it exceeds the screen
Ok, it's done.
I want to thank you for this tool! Setting up Spritefonts in C3 has been one of my worst dev experiences especially since i'm on a Mac and can't use the ancient .NET app that is on the forums. This tool seems to really fill that gap so thanks a ton!!
Can you please enable XML output for the character data?
You would need describe more what and why, cause I don't understand.
What an incredible tool !
do you think it will be possible to import other fonts (like the ones I store in a folder on my online space) ?
I don't know. If font is accessible directly through URL it should be possible, but I didn't test everything. If your URL is not supported by my tool you can send me it and I will check in free time.
That would be lovely. Here's the link
https://www.laurentgontier.com/MourningExtended.otf
Your server is configured to block access from different domain.
The best solution is to unlock it on your side. I could also make a proxy as middleware to solve this problem but it's too much effort comparing to first solution.
There is third option, my tool is now free to download and install it on your server where problem will not appear: https://github.com/stmn/font2bitmap
Just need to upload: https://github.com/stmn/font2bitmap/archive/refs/heads/gh-pages.zip
That works pretty well when I upload the tool online. Thank you ! Will you provide future updates to download as well ?
Something else : I made the test with a otf pixel font but the generated png has anti alias on even when I turn sub pixel anti alias off
I fixed an issue, should be good now.
All code has been refactored, if you'll find any problem just leave it in a comment.
You saved my life :D
Thank you for this! :D
Thanks, it's nothing big and complicated tho. Anyway if you or somebody other have idea for some improvement just send message in comments.
hello ! What a wonderful pièce of software ! I suggest you provide with an export module to Construct 3 sprite font. https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/sprite-font
Check for Spacing data
Inspiration may come from https://www.construct.net/en/forum/game-development/tools-and-resources-27/sprite-font-generator-v3-64038
Look for exported files.
Hello, I have prepared "Snippets" button. It allow to copy "Spacing data" which Construct user need to apply in Sprite font property. As I was testing it worked properly, but you need to disable "centered" checkbox which I will also describe in tool description soon.
That is amazing ! Thank you !
Do you think in the future your tool may accept fonts others than Google's ?
Well it's possible that I will provide an input form to import font from url. In this way there will be possibility to create bitmap from all fonts which are accessible by any server. For example here: https://www.cdnfonts.com/grames.font you will need to copy that url on right.
At this moment if we want to use different font we can paste in browser console small js code like below:
const style = document.createElement("style")
style.textContent = `
@font-face {
font-family: 'YourFontName';
src: url('https://fonts.cdnfonts.com/s/30605/GRAMES.woff');
}
#preview {
font-family: 'YourFontName' !important;
}
`
document.head.appendChild(style)