Performance
Nahnu Fonts is built to add as little as possible to your pages: one cached stylesheet, the smallest font files, and fonts served from your own domain.
What’s built in#
| Feature | Why it’s faster |
|---|---|
| One stylesheet | Every active font is in nahnu-fonts.css, so a page makes one CSS request for all fonts. It’s versioned, so browsers cache it until a font changes |
| Same-domain files | No connection to a third-party font server, so no extra DNS lookup or TLS handshake |
| WOFF2 for Google Fonts | The smallest font format |
| Only what you pick | Only the weights, italics and character sets you choose are downloaded |
| Variable fonts | One file for every weight when you need several |
| Only active fonts | Switched-off fonts aren’t in the stylesheet |
font-display#
Settings → Loading → Font display controls what visitors see while a font loads.
| Value | What visitors see |
|---|---|
| swap (recommended) | Text shows right away in the fallback font, then switches when the font arrives |
| fallback | A very short invisible period, then the fallback; switches only if the font arrives quickly |
| optional | Like fallback, but the browser may keep the fallback for this page view on slow connections |
| block | Text is invisible for up to about 3 seconds while the font loads |
| auto | The browser decides (usually like block) |
Preload your most important font#
Preloading tells the browser to fetch a font file before it finds it in the CSS. Use it for the font at the top of your pages, such as your heading font, to reduce the moment of fallback text.
- Tick Preload on a style in the font’s edit panel.
- Preload one or two files. At most 3 files are preloaded across all fonts; more would compete with other important files.
- Adobe Fonts can’t be preloaded.
Character sets#
Each character set adds to the file size. Settings → Google Fonts → Default character sets is set to Latin. Add Latin Extended for accented letters used in many European languages (for example Ł, ő, ș), and other sets only if your site uses those alphabets.
Print the CSS inside each page#
Settings → Loading → Print the CSS inside each page puts the font CSS in a <style> tag instead of linking the file. It saves one request per page, but browsers can’t cache it between pages. Best for setups with only one or two fonts.
If your uploads folder isn’t writable, the CSS is printed inline automatically.
Page cache#
When fonts change, the stylesheet is rebuilt and 9 cache plugins are cleared so visitors get the new version. See Page cache clearing.
Checklist#
- Use two families or fewer where you can.
- Download only the weights you use.
- Keep character sets to what your content needs.
- Preload only your heading font’s main style.
- Keep
font-display: swap. - Turn on Block Google Fonts from the theme and other plugins if your theme still loads Google Fonts you’ve replaced.