Fonts

Self-hosted fonts in the Customizer

GeneratePerf adds 97 fonts to Appearance → Customize → Typography (GeneratePress 3.2 or later), 90 of them variable. They are served from your own site: no request to Google Fonts, which GeneratePerf removes from the list.

When you select a font, GeneratePerf loads only its stylesheet, on the pages that use it, and preloads its variable font file (through WP Rocket when its version is older than 3.19). Most variable fonts cover the 300 to 800 weight range: a weight outside the range of a font is shown at the closest one. Most fonts also cover Central European languages (Polish, Czech, Hungarian, Croatian, Turkish…). They keep the ligatures and contextual alternates that browsers apply by default: JetBrains Mono shows its programming ligatures and Inter turns -> into an arrow; font-variant-ligatures: none turns them off where needed.

Fonts set in GenerateBlocks Global Styles

When the typography is set in GenerateBlocks instead of the Customizer, GeneratePerf loads the fonts it finds there too: the Design Tokens of the :root Global Style whose scope includes the font family (GenerateBlocks Pro 2.8 or later), and the font families written in the published Global Styles. A stack written with quotes, such as 'Poppins', 'Poppins-fallback', sans-serif, is recognised. The list is computed once and updated whenever a Global Style is saved. The generateperf_active_fonts filter adds or removes fonts (see Hooks).

The same fonts are loaded in the block editor, inside the editing canvas.

Fallbacks that keep text still

Each font comes with a fallback font, named after it (for example Poppins-fallback), whose metrics are adjusted with size-adjust, ascent-override and descent-override. While the web font downloads, text is shown with the fallback at almost the same size, so the page does not jump when the font arrives.

In CSS, use the full stack, for example font-family: Poppins, Poppins-fallback, sans-serif;.