Register custom font families that work on the front end, in the editor, and in the font picker.
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.
| 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.
| 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 |
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.
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.