Using custom fonts in a FiveM loading screen

#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.

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

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.