# Using custom fonts in a FiveM loading screen

> Load custom fonts in a FiveM loading screen or NUI: self-hosted WOFF2 with @font-face, declaring font files in fxmanifest, Google Fonts, font-display, avoiding the flash of fallback text, and licensing.

Source: https://fam-tools.com/guides/fivem-loading-screen-fonts · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 9 min

**Short answer.** Convert the font to WOFF2, put it in the resource, list it under `files` in fxmanifest.lua, and load it with `@font-face` using a relative path. Use one display font and one readable body font, set `font-display: block` or preload the file to avoid a flash of fallback text, and check the licence allows embedding.

## Key points

- Use **WOFF2** — the smallest web font format, supported by FiveM’s Chromium.
- Every font file in the resource must be listed in **`files`** in fxmanifest.lua.
- Two families is plenty: a display face for titles and a clean face for text.
- Preload the font or use `font-display: block` so the first frame is not in a fallback font.
- Check the licence: “free for personal use” fonts are not free for a public server.

Typography does more for a loading screen than any effect: the same layout in a generic system font and in a well-chosen display face look like two different servers. Fonts in FiveM work exactly like on the web, with one twist — files inside a resource must be declared in the manifest or the page cannot load them.

## Self-hosting a font (recommended)

1. Get the font as WOFF2. If you only have TTF or OTF, convert it with any web-font converter (or `woff2_compress` from Google’s tools).
2. Place it in the resource, for example `html/fonts/Display.woff2`.
3. Declare it in fxmanifest.lua under `files`.
4. Load it in CSS with `@font-face` and a path relative to the CSS file.

*fxmanifest.lua*

```lua
fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

files {
  'html/index.html',
  'html/style.css',
  'html/fonts/*.woff2',
  'html/img/*',
}
```

*html/style.css*

```css
@font-face {
  font-family: 'Display';
  src: url('fonts/Display.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

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

h1 { font-family: 'Display', system-ui, sans-serif; }
body { font-family: 'Body', system-ui, sans-serif; }
```

> **The number one font bug** — A font that works when you open the HTML in a browser but not in game is almost always missing from `files`. FiveM only serves files the manifest declares. Glob patterns such as `html/fonts/*.woff2` work.

## Google Fonts and other hosted fonts

Linking a stylesheet from Google Fonts works too, since the loading screen has internet access. It saves you hosting the files, at the cost of an extra request to a third party before text renders.

*index.html*

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
```

For a loading screen that must look right in the first second, self-hosting is more reliable; for NUI interfaces opened later in the session, hosted fonts are fine.

## Avoiding the flash of fallback text

Browsers render text in a fallback font while the custom one downloads (`swap`), or hide it briefly (`block`). On a loading screen the first frames are the most visible, so control this deliberately.

- `font-display: block` — text is invisible for up to about three seconds, then appears in your font. Good for a big title.
- `font-display: swap` — fallback first, then swaps. Good for body text and tips.
- Preload the display font so it is fetched immediately: `<link rel="preload" href="fonts/Display.woff2" as="font" type="font/woff2" crossorigin>`.

## Choosing fonts that fit a FiveM server

| Style of server | Display face | Body face |
| --- | --- | --- |
| Serious city roleplay | A clean condensed sans | A neutral sans |
| Gang / street | A heavy grotesque or stencil | A simple sans |
| Police / emergency | A squared, technical sans | A monospace or neutral sans |
| Racing / drift | A wide italic sans | A condensed sans |
| Redzone / PvP | A bold, aggressive display face | A compact sans |

Whatever you pick, use it everywhere — loading screen, HUD, website and Discord graphics — so the brand holds together. See the [branding kit guide](https://fam-tools.com/guides/fivem-server-branding-kit).

## Licensing

A public FiveM server is a public, and often commercial, use of a font. Fonts released under the SIL Open Font License (which covers most of Google Fonts) may be embedded freely. Fonts marked “free for personal use” from download sites require a commercial licence for a server that takes donations or sells anything. Keep the licence file with the font in your resource.

## Questions

### Why does my custom font not show in the FiveM loading screen?

The font file is probably not listed under `files` in fxmanifest.lua, or the path in `@font-face` is wrong. FiveM only serves files the manifest declares.

### Which font format should I use?

WOFF2. It is the smallest format and is supported by FiveM’s Chromium. Convert TTF or OTF fonts before adding them.

### Can I use Google Fonts in a FiveM loading screen?

Yes, the loading screen can load them from the internet. Self-hosting is slightly faster and more reliable for the first seconds of the screen.

### Is the GTA font free to use?

GTA-style fonts are made by independent foundries with their own licences. Check the licence of the specific file before using it on a public server.

## Related

- https://fam-tools.com/guides/fivem-loading-screen-html-tutorial
- https://fam-tools.com/guides/fivem-loading-screen-design-tips
- https://fam-tools.com/guides/fivem-nui-assets-paths
- https://fam-tools.com/guides/fivem-server-branding-kit