Guide to Custom Fonts
This method ensures your site remains GDPR compliant, lightning-fast by avoiding external requests, and perfectly synced between the WordPress Site Editor and your Tailwind configuration.
1. Source and Organize
Download your font (preferably in .woff2 for performance or .ttf for variable fonts) and place it in your theme's root directory.
- Path: wp-content/themes/your-theme/assets/fonts/
2. Register in theme.json
You must tell WordPress where the file is and what "Slug" you want to use for the CSS variable.
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "\"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif", // use "\" in fonts that have spaces
"slug": "ibm-plex-sans",
"name": "IBM Plex Sans",
"fontFace": [
{
"fontFamily": "IBM Plex Sans",
"fontWeight": "100 900", // Range for Variable Fonts
"fontStyle": "normal",
"src": [ "file:./assets/fonts/IBMPlexSans-Variable.ttf" ]
}
]
}
]
}
}3. Map to Tailwind in tailwind.config.js
To use your WordPress-registered font with Tailwind classes (like font-sans), map the Tailwind key to the WordPress CSS variable in tailwind.config.js.
theme: {
extend: {
fontFamily: {
// slug from theme.json -> --wp--preset--font-family--{slug}
sans: 'var(--wp--preset--font-family--ibm-plex-sans)',
}
}
}4. Set Global Defaults in theme.json
Apply the font sitewide via the styles block in theme.json so every block inherits it automatically. JSON
"styles": { "typography": { "fontFamily": "var(--wp--preset--font-family--ibm-plex-sans)" } }
## 5. Verification Checklist
Path Check: Does the src in theme.json match your file structure exactly? (Case sensitive!)
Network Tab: Does the font file show a 200 OK status in the browser Inspector?
Rendered Font: In Firefox's Fonts tab or Chrome's Computed tab, does it list your custom font as the one actually being used?