Using custom fonts in a FiveM loading screen
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.
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)
- 1Get the font as WOFF2. If you only have TTF or OTF, convert it with any web-font converter (or
woff2_compressfrom Google’s tools). - 2Place it in the resource, for example
html/fonts/Display.woff2. - 3Declare it in fxmanifest.lua under
files. - 4Load it in CSS with
@font-faceand a path relative to the CSS file.
fx_version 'cerulean'
game 'gta5'
loadscreen 'html/index.html'
files {
'html/index.html',
'html/style.css',
'html/fonts/*.woff2',
'html/img/*',
}@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; }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.
<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.
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.
Common 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.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free