Google Font To Bitmap Converter
This tool has been created for easy and fast conversion
of any font available at fonts.google.com (around 1400 various fonts)
into bitmap font.
Snippets
You can copy a small code snippets for one of these game engines:
Construct 3
Use this snippet to keep proper characters widths.
Paste received JSON into the 'Spacing data' property of the Sprite Font.
Required bitmap settings: disable "centered" checkbox before downloading PNG.
KaboomJS
Use this snippet to load downloaded bitmap.
Required bitmap settings: none, default one are good.
Development log
- 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.
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)