Font Picker
Change the platform's body font in one click. The selected font loads from Google Fonts on every page across the platform — frontend, admin, user dashboard, inbox, login screens.
Where to find it
Admin → Settings → General tab → scroll to Body Font.
Available fonts (20 whitelisted)
- Outfit (default) — modern geometric sans-serif
- Inter, Roboto, Open Sans, Lato — classic, highly readable sans
- Poppins, Nunito, Quicksand — friendly rounded sans
- Montserrat, Raleway — elegant display sans
- Source Sans 3, IBM Plex Sans, Public Sans — corporate/utility
- DM Sans, Manrope, Plus Jakarta Sans, Figtree — modern startup fonts
- Work Sans, Rubik, Space Grotesk — designer-favourite
The dropdown previews each option in its own typeface so you can compare before saving.
Font Weights
Semicolon-separated list of weights to load. Default: 300;400;500;600;700;800. You can remove weights you're not using to reduce page-load size.
| Weight | CSS class | Used by |
|---|---|---|
| 300 | font-light | Rarely used — can remove |
| 400 | font-normal | Body copy — keep |
| 500 | font-medium | Buttons, labels — keep |
| 600 | font-semibold | Subheadings — keep |
| 700 | font-bold | Headings — keep |
| 800 | font-extrabold | Hero text, brand mark — keep |
Tip: Loading fewer weights speeds up the first paint of your pages. For a typical install,
400;500;600;700covers 95% of usage and shaves ~80 KB off the initial font request.
How it works
When you save, the chosen font and weights are stored in system_settings under font_family and font_weights. On every page load, FontHelper::renderHead() emits a <link> tag to Google Fonts plus a small inline <style> block that sets a CSS variable --app-font. Every layout sets body, .font-sans { font-family: var(--app-font) }, so the new font applies instantly across the platform.
Fonts are loaded with display=swap so users see fallback system fonts immediately and the custom font swaps in once downloaded — no FOIT (flash of invisible text).
Adding a custom font not on the list
The dropdown is restricted to 20 whitelisted fonts as defense-in-depth (the value gets interpolated into the Google Fonts URL, so we don't accept arbitrary input). To add another Google Font:
- Open
app/Helpers/FontHelper.php. - Add the font's exact Google Fonts name to the
$allowarray ingetFamily(). - Add a matching entry to the
$fontOptionsarray inresources/views/admin/settings.blade.php(look for the “Body Font” select). - Run
php artisan view:clear. - The new font appears in the dropdown.
For non-Google-Fonts (uploaded TTF/WOFF2), you'd customise the helper to emit a @font-face rule instead of a Google Fonts link. Out of scope for the default install.