Adding a custom Google Font to your blog
Replace your theme's default typeface with any Google Font in three steps — no manual CSS, no font files to manage, and no Cumulative Layout Shift from late-loading fonts.
Adding a custom Google Font to your VeloCMS blog takes three steps in Admin Themes Typography. You pick the font family from a searchable list of all Google Fonts, select the weights you need (400 for body, 700 for bold, 800 for headings is a common set), and click Save. The font loads via Next.js's built-in font optimization, which self-hosts the font files and adds size-adjust to eliminate Cumulative Layout Shift.
Choosing fonts that work well together
Most VeloCMS blogs use two typefaces: one for headings (usually a bold serif or geometric sans) and one for body copy (usually a humanist sans-serif optimized for readability at small sizes). Classic pairings: Playfair Display + Lato, Fraunces + DM Sans, Space Grotesk + Inter, Merriweather + Source Sans 3. If you're unsure, sticking to a single font family at different weights is always safe — Inter at 400/600/800 is the default for good reason.
How Next.js optimizes the font load
VeloCMS uses next/font/google under the hood, which downloads the font files from Google at build time, self-hosts them on your domain, and generates a font-display declaration with a size-adjust value tuned to your specific font. The result: no external request to fonts.gstatic.com in production (privacy improvement), no FOUT (Flash of Unstyled Text), and zero CLS from font swapping.
Loading more than two font families or more than four weight/style variants per family adds measurable payload. Keep your font selection to two families, three weights maximum, and no italic variants unless your design specifically requires them.
Fallback fonts while the custom font loads
The theme's CSS includes a fallback font stack that approximates your chosen Google Font's metrics. When VeloCMS generates a custom font entry, it computes a size-adjust value using the Fontaine algorithm so the fallback renders at nearly the same line height and character width as the loaded font. This is what eliminates CLS — the layout doesn't jump when the custom font arrives.