Add a page on using fonts in Godot

[skyace65]

Adds a small page on using fonts in Godot. Both images went through png compression. Closes #4743 closes #4150 and closes #4467

[Calinou]

This is a good start! There are some things I'd clarify:

• DynamicFont supports TrueType (.ttf) and OpenType (.otf) font formats.
  • Additionally, the master branch supports Web Open Font Format 1 (.woff) is supported, but not WOFF2 (.woff2) as it requires a Brotli compression implementation to be linked in the engine. This WOFF1 support may be backportable to 3.x too (it might be just a matter of exposing it in the DynamicFontData property hint).
• Bitmap font files (.fnt) are typically generated with a tool such as BMFont, which should be linked on the page.
• I wouldn't mention distance field fonts if they don't work at all. Instead, we should probably remove all references to them in 3.x. In master, they may be readded in a better-looking and more powerful form with Make FontData importable resource. Add multi-channel SDF font rendering. godot#51908. We can update this article on master if that pull request is merged.
• DynamicFont hinting and antialiasing properties (and their idiosyncracies related to saving DynamicFontData to a resource file) should be mentioned. These are part of the underlying DynamicFontData resource that is assigned inside each DynamicFont resource. Ideally, there should be a visual comparison between each hinting and antiliasing mode.
  • Font hinting defaults to Normal in 3.x and Light in master.

This can be done in a future PR as it's more advanced:

• Link to websites that host open source fonts such as Google Fonts and Font Library. The latter has many fonts not available on Google Fonts.
• Performance caveats related to large font sizes (> 40) when using DynamicFont should be mentioned. This is especially true on mobile devices which have both hiDPI displays and slow CPUs. Stalling will occur whenever a character is displayed for the first time in a given DynamicFont resource. This can be worked around by displaying a Label with all the characters you intend to display during gameplay for one frame with low (but non-zero) opacity (Color(0, 0, 0, 0.01)). This can also be done this label behind a solid ColorRect for one frame (e.g. during a screen transition).
  • Built-in font prerendering facilities may be added if Make FontData importable resource. Add multi-channel SDF font rendering. godot#51908 is merged.

[skyace65]

I've made adjustments based on your feedback. However, I want to keep that distance field fonts are broken, otherwise we'll end up with confused users and people asking "why isn't this documented?" Which happened in #4467. Additionally should we be encouraging the use of bitmap fonts by linking to BMFont? I was under the impression that they're being used less and less these days, or is there a use case for them I don't know about? And do you think your .woff PR will get merged in time for 3.4? If so I can adjust this PR and wait for that to get merged before this does.

[Calinou]

It makes sense to document distance fielf fonts currently being broken, althoug we may want to look into removing the code to import them in 3.x to avoid confusion.

Bitmap fonts are still useful when you need a special appearance (soft shadows, gradients) but don't want to use a shader on every node that displays text. That said, BMFont doesn't have a way to add gradients or soft shadows. libGDX's Hiero does, but it's no longer maintained by the looks of it.

Regardless, we should still mention that .fnt is the BMFont format, not a custom Godot-specific format.

As for WOFF support, it's likely to be merged for 3.4. It just needs a contributor to approve the PR 🙂

[skyace65]

I've added that .fnt files are created by BMFont, and added .woff to the list of supported fonts since your PR got merged. Feel free to merge if it looks good.

[hpnrep6]

Some minor suggestions/corrections.

[skyace65]

Fixed.

[mhilbrunner]

Some small formatting stuff, otherwise looks very good. :)

[skyace65]

Fixed.

[mhilbrunner]

Thanks a ton! :)