How to Add Custom Fonts to a FiveM Loading Screen | Guide

Typography is one of the most powerful tools in web design, and your FiveM loading screen is essentially a webpage. Relying on default system fonts like Arial or Times New Roman can make a high-quality GTA RP server look amateurish. This guide will show you exactly how to add custom fonts to your FiveM loading screen.

Method 1: The Easy Way (Using a Builder)

If you are using a visual editor like the ViceForge Loading Screen Builder, adding custom fonts requires absolutely zero coding.

Open the ViceForge Builder interface.
Navigate to the Typography or Design tab.
Select from a curated dropdown list of premium Google Fonts (e.g., Inter, Roboto, Montserrat, Bebas Neue).
The builder automatically generates the required CSS `@import` rules and font-family declarations in the exported package.

Method 2: The Manual Way (HTML/CSS)

If you are coding your loading screen by hand or modifying an existing template, you will need to manually import the font using CSS. Here is the standard procedure for integrating Google Fonts.

Step 1: Choose Your Font

Go to Google Fonts and browse for a typeface that fits your server's theme. For example, 'Oswald' is great for bold, gritty roleplay servers, while 'Quicksand' is excellent for modern, clean UI designs.

Step 2: Get the Import Code

Once you've selected your font weights (e.g., Regular 400, Bold 700), Google will provide you with a <link> tag or an @import rule. We recommend using the @import rule directly in your CSS file to keep your HTML clean.

/* Paste this at the VERY TOP of your style.css file */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

Step 3: Apply the Font Family

Now that the font is imported, you must tell your CSS elements to use it. You can apply it globally to the `body` or to specific elements like headers (`h1`, `h2`).

/* Apply globally */
body {
    font-family: 'Oswald', sans-serif;
}

/* Or apply to specific text */
.server-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

Common Issues

Font Not Loading: Ensure the `@import` statement is at the absolute top of your CSS file. If it comes after other CSS rules, it will fail to load.
CORS Errors: FiveM's CEF (Chromium Embedded Framework) usually handles external Google Fonts fine, but if you are self-hosting fonts using `@font-face`, ensure your file paths are correct relative to your fxmanifest.lua and that the font files are declared in your manifest's files array.

How to Add Custom Fonts to Your FiveM Loading Screen