Fonts
Register custom font families that work on the front end, in the editor, and in the font picker.
Overview
Register custom font families with @font-face and make them available across the front end, the block editor canvas, and the theme.json font picker. No third-party font service, no external requests.
Per-Font Settings
| Field | What It Controls |
|---|---|
| Family | The font-family name you reference in CSS and the editor |
| WOFF2 / WOFF URL | Font files, uploaded through the WordPress media library |
| Weight | A single weight (400) or a variable range (100 900) |
| Style | normal, italic, or oblique |
| Display | swap by default; also auto, block, fallback, optional |
| Preload | Emits a <link rel="preload"> so first paint does not shift |
| Unicode range | Limits which characters trigger a download, with quick-pick subsets |
Variable weight ranges are clamped. WordPress silently drops a @font-face whose weight range falls outside 100–1000 when it validates theme.json, taking the font picker entry with it. A range like 1 900 is normalized to 100 900 so the front end, the editor canvas, and the picker cannot disagree.
Where Fonts Are Delivered
| Context | Channel |
|---|---|
| Front end | Inline @font-face CSS plus optional preloads |
| Block editor canvas | The editor styles setting, which is the only channel that reliably crosses into the WordPress 6.3+ iframe |
| Font picker | theme.json fontFamilies data |
| Bricks Builder | Native integration; families appear in the Bricks typography picker and load inside the builder canvas |
Uploading Font Files
WOFF and WOFF2 uploads are enabled in the media library and validated by binary magic-byte signature, not by file extension, so a renamed file is rejected before it is stored.
Developer Filters
Add a font family in code
add_filter( 'functionalities_fonts_items', function( $items ) { $items[] = array( 'family' => 'Inter', 'woff2_url' => 'https://example.com/inter.woff2', 'weight' => '100 900', 'style' => 'normal', 'display' => 'swap', 'preload' => true, ); return $items; });
Use functionalities_fonts_css to filter the generated CSS, and functionalities_fonts_enabled to disable the module conditionally.