---
tags:
  - wordpress
  - fse
  - theme.json
  - typography
  - blocks
title: Setting Default Typography for Specific Blocks
---

# Setting Default Typography for Specific Blocks

A common requirement in theme development is ensuring specific blocks look correct immediately upon insertion, without the user having to manually adjust settings in the sidebar.

For example, you might want the **Pullquote** block to always be `1.5rem` and italic, or the **Code** block to always be `0.9rem` and monospace.

## 1. Settings vs. Styles

It is crucial to understand the difference between `settings` and `styles` in this context:

*   **`settings.blocks`**: Controls the **UI options**. (e.g., "Only show Small and Large font sizes in the dropdown for this block").
*   **`styles.blocks`**: Controls the **Default CSS**. (e.g., "Apply the Large font size automatically when this block is added").

**To answer your question:** You want to use **`styles`**.

## 2. The Implementation

You define these defaults inside `styles.blocks.[block-name].typography`.

### Example: Customizing Code and Pullquote Blocks

```json
{
    "version": 3,
    "styles": {
        "blocks": {
            "core/code": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--monospace)",
                    "fontSize": "var(--wp--preset--font-size--small)"
                }
            },
            "core/pullquote": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--large)",
                    "fontStyle": "italic",
                    "fontWeight": "300"
                }
            }
        }
    }
}
```

## 3. Best Practices

1.  **Use Variables:** Always try to use your registered presets (e.g., `var(--wp--preset--font-size--small)`) instead of raw values like `14px`. This ensures that if you change "Small" globally later, your blocks update automatically.
2.  **Specificity:** WordPress generates a CSS rule specifically for that block class (e.g., `.wp-block-code { ... }`). This generally overrides global element styles but has lower specificity than inline styles added by the user in the editor.

## 4. Restricting the Editor (Optional)

If you set a default size but want to prevent the user from changing it, you can disable the typography controls for that block in `settings`.

See the [[wordpress-fse-02-presets-and-sanitization|Settings reference]] for how to disable specific UI tools.