Custom Fonts in Beaver Builder with Font Hero
Getting custom fonts into Beaver Builder usually means writing your own @font-face CSS and then typing the font name by hand in every module. With the Font Hero integration, the font families you register in Font Hero show up in Beaver Builder's own font picker. You add custom fonts to Beaver Builder once and pick them from a dropdown after that. It works in the editor and on the front end.
Register your font families in Font Hero
If you name your families by role (headline, subheadline, body) instead of by typeface, your layouts don't depend on one specific font. In this video we start in Tools → Font Hero, where three families are already registered:
- Headline, weight 400
- Subheadline, weight 400
- Body, weight 400
You can add more weights to any family with + Add Font Face, or add a new family with + Add Family.
Apply a Font Hero font in Beaver Builder
You don't need extra CSS or a separate font plugin setting. The families are already in the builder.
- Go to Pages → Add New, give the page a title and publish it.
- Launch Beaver Builder and drag a Heading module onto the page.
- Enter your heading text. We used "This is a test title".
- Open the Style tab, then under Typography expand Font.
- Open the Family dropdown. All three Font Hero families are listed there.
- Select Headline. The heading switches to that font in the builder right away.
When you save and view the page, the front end uses the same font.
Change the font from Font Hero
The module stores the family name, Headline, not a specific font file. So when you want to change the font, you don't have to edit each module in the builder. To show this, we go back to Tools → Font Hero, choose a different font, and reload the page. The heading now uses the new font on the front end, and we didn't open Beaver Builder at all.
Get Font Hero → dplugins.com
