# 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.

```JSON
"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.

```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?