Custom Fonts in Gutenberg with Font Hero: Font Family and Weight
Adding a custom font to the WordPress block editor often means writing @font-face rules or adding another plugin just to get the font into the list. With Font Hero, you register the font family once. It then shows up in Gutenberg's own Typography panel, next to the default fonts. You pick it per block, set the weight, and it looks the same in the editor and on the front end.
Make sure Gutenberg has the Font control
If you don't see a font family option in the block settings, there is nothing for Font Hero to connect to. Older WordPress versions did not have the font family control in core yet, but the Gutenberg plugin adds it.
- Select a block in the editor, for example a Heading, and open the Block tab in the sidebar.
- Under Typography, check for the Font dropdown. Out of the box it lists Gutenberg's defaults, such as DM Sans, IBM Plex Mono, Inter, System Font and Source Serif Pro.
- If the control is missing, go to Plugins → Add New, search for "Gutenberg", then install and activate the Gutenberg plugin by the Gutenberg Team.
Register a font family in Font Hero
Once the control is there, add your own font. We use Roboto Mono in three weights: thin, regular and bold.
- Go to Tools → Font Hero and register a new font family.
- Give it a name (we used Mono) and save.
- Add a weight for each file. The file picker opens the Choose Images media dialog. If the files aren't uploaded yet, select all of them on your computer and drag them into the dialog in one go. We dropped in
RobotoMono-Thin.woff2,RobotoMono-Regular.woff2andRobotoMono-Bold.woff2. - Choose the right file for each weight, then save.
Uploading several files at once helps when a family has many weights, because you upload them once and then assign them.
Apply the font in the block editor
Now the font is available in Gutenberg's normal controls, so you don't need to add a class or write CSS.
- Reload the editor page.
- Select a block and open Typography → Font. Your family (Mono) is in the list. Select it.
- Use the Appearance dropdown to set the weight. In the video, Headline 1 is set to Light (the thin file), Headline 2 to regular and Headline 3 to bold.
- Click Update.
Check the front end
A font that shows in the editor but not on the live page is a common problem. After updating, open Preview or View Page. Each heading shows the same Roboto Mono weight on the front end as it did in the editor. We changed the weights again and reloaded, and the front end still matched.
Who is this for
- Block theme and Gutenberg site builders who want self-hosted custom fonts in the native Font dropdown instead of hand-written
@font-faceCSS. - Anyone who has a font family with several weights and wants to pick each weight per block with Appearance.
- Sites on a WordPress version without the font family control, which can get it through the Gutenberg plugin.
FAQ
Why don't I see a Font option in Gutenberg's Typography panel?
Your WordPress version may not include the font family control in core yet. Install and activate the Gutenberg plugin from Plugins → Add New, and the Font dropdown will appear under Typography.
Where do I add fonts in Font Hero?
Go to Tools → Font Hero, register a font family, give it a name, then add one font file per weight. You can drag several font files into the media dialog at once.
How do I set the font weight for a block?
After you select your Font Hero family in Typography → Font, use the Appearance dropdown in the same panel to pick the weight, such as Light, Regular or Bold.
Will the font look the same on the front end as in the editor?
Yes. In the video, the family and weights set in the editor render the same way on the live page after clicking Update.
Get Font Hero → dplugins.com
