Font Hero: Self-Hosted Fonts and Font Pairings for WordPress
Loading fonts from a third-party CDN raises GDPR questions. Adding them by hand means FTP uploads and writing your own @font-face rules. Font Hero is our no-code font manager for self-hosted fonts in WordPress. This short tour covers the whole workflow: upload a font, control how it loads, apply it to your own selectors, or import a ready-made font pairing and use it in your builder.
Upload and manage your fonts
FTP and hand-written CSS get in the way of trying out new fonts. Font Hero uses the native WordPress media uploader, so adding a font or replacing it later happens in the admin.
- Go to Tools → Font Hero. The top menu has Fonts, Features, Font Pairing, License and Documentation.
- Click + Add Family to create a family, for example Headline, Subheadline or Body.
- Click + Add Font Face, pick the Font Weight (e.g.
400) and upload the file under Upload files with the Woff2 button.
Font display, preload and custom selectors
How a font loads affects what visitors see while the page renders. Each font face has these settings:
- Font Display: choose
auto,block,swap,fallbackoroptional. - Font is italic (Regular by default): mark the face as italic.
- Preload: preload the fonts that matter most, such as your headline font.
- Enter selectors comma separated: apply the font to your own CSS selectors. You can add more than one, e.g.
h1, h1 bold, h1 italic, .large-title.
Font pairings
Choosing fonts that work together takes time. The Font Pairing tab has 16 pairings, and we plan to add more regularly. Examples include Darker Grotesque, Great Vibes and Aboreto. Each pairing has three font families: headline, subheadline and body. A separate subheadline font gives your typography more range than a two-font setup. Click Import Fonts Group to add all three at once.
Use your fonts in Gutenberg, Oxygen Builder and Bricks Builder
Font Hero integrates with Gutenberg, Oxygen Builder and Bricks Builder. In Gutenberg, select a block and open Typography → Font in the sidebar, then pick a family such as Body. The builder preview shows the font you chose, and the front end matches it.
For more details on every feature, see the Font Hero documentation.
Get Font Hero → dplugins.com
