-
Hi, I’m facing a font swap / CLS issue in GeneratePress + GenerateBlocks.
On first paint, the text shows a fallback font (looks serif), then after the webfont loads it switches to “Plus Jakarta Sans”, causing visible layout shift.
My GP local font CSS contains:
@font-face {
font-family: “Plus Jakarta Sans”;
font-weight: 200 800;
font-style: normal;
font-display: auto;
src: url(“…woff2”) format(“woff2”);
}fonts.css is loaded like:
https://www.site.com/wp-content/uploads/generatepress/fonts/fonts.css?ver=1771585795Questions:
1) Should I change font-display fromautotoswap(oroptional) for GP local fonts?
2) What’s the recommended way in GP to add a proper fallback stack (system-ui/Segoe UI/Roboto/Arial) so it doesn’t flash serif first?
3) Is there a recommended way to preload the local woff2 (or fonts.css) with GP to reduce swap/CLS?Thanks
-
Hello.
The documentation for that method is still valid if you prefer doing it manually, but there’s now a more streamlined approach using the Font Library (requires GP Premium 2.5+).
Using the Font Library:
- Go to Appearance → GeneratePress and activate the Font Library module if not already enabled
- Go to Appearance → Font Library
- Click Upload Custom Fonts and upload your Quincy font files (woff2, woff)
- Once uploaded, click on the font to open its settings
- Expand Advanced Options
- In the Font Family Fallback field, enter: Georgia, serif
- Save your changes
The font will now be available in Customizer → Typography → Font Manager and the fallback is automatically included in the generated CSS.
You can also set the Font Display value to
swapin those same Advanced Options if you want to control FOUT behavior. -
Yes I already uploaded local font ..but I dont text change after loading then what to do
-
Hi again,
but I dont text change after loading then what to do
Sorry, I don’t understand this. Are you saying you have set the Font Display to swap from the font’s settings and you still getting FOUT behavior?
-
My issue is that the text renders in a fallback font first, then switches to Plus Jakarta Sans after load (visible font swap + slight CLS). I want NO visible font change.
Even with Font Display = swap and a fallback set, I still notice the switch. What’s the best GP/Font Library method to eliminate/minimize the swap?
Do you recommend preloading the local woff2 (and how in GP), or any other setting to prevent the late font swap?
-
Do you have any caching on your site? Can we see a URL please?
- You must be logged in to reply to this topic.