Web build not respecting Monospace SystemFont for Godot Label

Question

I want a label to use a monospace SystemFont but the Web build is not respecting this setting.

Here's steps to reproduce my situation:

1. Create a new Godot 4.0.1 project

2. Add two Label controls in a VBoxContainer with some text

3. Give the second text a "LabelSettings", with a SystemFont set to Monospace

4. Save the main scene and set it as the default scene in project settings

5. Export for the Web with default settings

6. Use npm install -g serve to serve with a server.json file:

   {
       "headers": [{
           "source": "**/*",
           "headers": [
               {
                   "key": "Cross-Origin-Embedder-Policy",
                   "value": "require-corp"
               }, {
                   "key": "Cross-Origin-Opener-Policy",
                   "value": "same-origin"
               }
           ]
       }]
   }
   

7. Run serve . to serve it at http://localhost:3000

8. Open the game

• Result: both fonts show with the same font
• Expected: second label should use a monospace font (which does work if the game is run in debug mode or as Windows Desktop Runnable export)

How can I make Web builds use a monospace font, preferably without including custom font files?

---

Here's some screenshots of what I described above. In the editor:

And the unexpected Chrome output:

Note that I'm on Windows. Firefox shows the exact same behavior by the way.

Answer 1

Currently SystemFont is not supported on web exports.

I quote the documentation:

Note: This class is implemented on iOS, Linux, macOS and Windows, on other platforms it will fallback to default theme font.

Thus, you will have to embed the fonts.

---

The developers ran into an issue with the fonts in web platforms. Since Godot renders to a canvas (it is not applying the font to web elements with CSS), they need to read the font data, which is not available in most browser (and, of course, they can't access the local file system).

Apparently there could be a way, but at the time of writing it is Chrome only: queryLocalFonts. I believe they want a Firefox solution before going ahead with the feature, but I don't speak for them. So you would had to embed the fonts to have an uniform experience across browsers anyway.