Use a font converter like transfonter:
- Upload all fonts
- Enter subset (usually latin, can also copy/paste your specific subset if needed, saves a lot of weight)
- Woff/woff2
- (Optionally) if the exported font has issues, try a different hinting param
Convert fonts to msdf format in a single texture and compress them
- Install msdf-bmfont-xml from npm
- Export all your fonts to
.fntor.jsonto the same texture (check the example for the specific command) - Install convert-bmfont from npm
- convert your previously exported .fnt/.json to .bin (much lighter, i.e.
.json250kb,.bin21kb) - Install (in your web project) parse-bmfont-binary or load-bmfont to load/parse the
.bin. Note: you might need to install this buffer lib for it to work. - parse with OGL Text* class, three-bmfont-text or others.
* OGL Text class relies on chars.char to be defined, which is actually not part of the BMFont spec, and is omitted in .bin format. It's easy to add it yourself tho: parsedFontBin.chars.forEach(char => char.char = String.fromCharCode(char.id))