Skip to content

Instantly share code, notes, and snippets.

@ayamflow
Last active August 14, 2021 17:02
Show Gist options
  • Save ayamflow/0658c19323ef663773c4148de8b04759 to your computer and use it in GitHub Desktop.
Save ayamflow/0658c19323ef663773c4148de8b04759 to your computer and use it in GitHub Desktop.
Font workflow for Web & WebGL

CSS fonts

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

WebGL fonts

Convert fonts to msdf format in a single texture and compress them


* 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))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment