Using Fonts in Your Game

Games run with no external network access, so every font your game uses must live inside the ZIP you upload.

Why Fonts Must Be Bundled#

Published games cannot reach any external server. A runtime link to an external font is blocked and the browser falls back to a system font. The game runs, but text looks different from what you designed.

Google Fonts: Automatic Internalization at Publish#

If your game's HTML or CSS contains a <link> to fonts.googleapis.com (or a CSS @import of such a stylesheet), Minit Games fetches the font data at publish and embeds it into your game's files automatically.

This is a best-effort safety net: it covers the common single-stylesheet case but may miss other patterns (e.g. fonts loaded dynamically via JavaScript), and a miss falls back silently to a system font. Don't rely on it as your primary approach.

Best Practice: Bundle Your Font Files#

Include the font file in your ZIP and reference it with a relative-path @font-face.

Step 1: Download the font file#

Get the weights and styles you need. WOFF2 is the preferred web format when available. For Google Fonts: fonts.google.com → select the font → Download family. Place the file alongside your other assets:

assets/
  fonts/
    MyFont-Regular.woff2
index.html
game.js

Step 2: Declare the font with @font-face#

@font-face {
  font-family: 'MyFont';
  src: url('assets/fonts/MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'MyFont', sans-serif;
}

font-display: swap shows a fallback font immediately and swaps in yours once loaded, avoiding invisible text during startup.

Step 3: Verify before uploading#

Open the game locally and check the browser's network panel: no request should go out to fonts.googleapis.com, fonts.gstatic.com, or any other external host.

What Happens When a Font Cannot Be Loaded#

The browser substitutes the nearest system font: no error shown, only the text's appearance changes. Common causes:

• The @font-face path doesn't match the file's location inside the ZIP
• Automatic internalization didn't cover your font-loading pattern
• A font loaded dynamically via JavaScript after the page rendered

Minit Games' Own UI Elements#

The platform's own interface (header panel, feedback surfaces) ships its own fonts. Nothing to do there. This article only applies to text rendered inside your game.