Custom Fonts in Bricks Builder with Font Hero
Bricks Builder can already self-host fonts, but it gives you only a few settings. You can't control font-display or preload one font face, and it doesn't support variable fonts. This video shows how Font Hero adds those loading options for custom fonts in Bricks Builder. Your registered families still show up in Bricks' own font family picker, so you get faster text rendering without changing how you build.
Font display and swap
If the browser has to wait for a font file before it shows any text, visitors see a blank area where the text should be. The Font Display setting controls what happens during that wait.
- In WordPress, go to Tools → Font Hero.
- Find a family (for example Mono) and click Edit on one of its font faces.
- Below Upload files, open the Font Display dropdown. The options are Auto, Block, Swap, Fallback and Optional.
With Swap, the browser loads the HTML and CSS and shows the text right away in a default font. When your font file finishes loading, it switches to your custom font. Visitors can read the page sooner, which makes the site feel faster.
Preload critical font faces
Swap is most visible on large headlines, where the font change can be easy to see. To avoid it, tick the Preload checkbox on the font face you use for headlines. That one font face then loads before the content is displayed. You can preload just the faces that matter instead of every font on the site.
Variable fonts
Bricks doesn't support variable fonts natively. Font Hero supports them alongside static fonts. If your typeface comes as a variable font, use it: one variable font file is usually much smaller than the set of static weights it replaces.
Font Hero fonts in the Bricks font family picker
To use these fonts in Bricks, you don't need to set anything up again. Open an element in the Bricks editor, go to the Style tab and open the font family setting. Your Font Hero families are listed there (in the video: Mono, Headline, Sub Headline and Body). Pick one and the Bricks editor updates the element right away, the same way it would with Bricks' own fonts.
Get Font Hero → dplugins.com
