← All posts

Font Pairings in WordPress: 16 Ready Font Sets in Font Hero

font hero

Picking fonts that go together takes time. Testing them on a real page usually means editing every block again. This video shows the Font Pairing collection in Font Hero: 16 ready-made font sets that you import with one button and assign to your content. When you want to try a different look, you swap the pairing, and the whole page picks up the new fonts without any block edits.

Browse and import a font pairing

Most of the work in choosing fonts is finding ones that fit together. Font Hero comes with 16 pairings made by our team, so you start from sets that already fit together.

  1. In WordPress, go to Tools → Font Hero and open the Font Pairing tab.
  2. Scroll through the pairings. Each card shows a headline, a subtitle and a paragraph of body text. Among the pairings in the video are Playfair Display, Chonburi, Oswald, Bebas, Ultra, Poller One, Bellefair and Old Standard TT.
  3. Click Import Fonts Group under the pairing you like.

Every pairing has three font families: headline, sub-headline and body. Most pairings stop at two fonts. The third one gives your subheadings their own style, so the page has more variety. After import, the families appear in your font list with their weights (for example, Body with 400 and 600). You don't need to click Save after importing, because everything is set up right away.

Apply the fonts in Gutenberg

Once a pairing is imported, you assign each role to your content once.

  1. Open a page in the block editor and select a heading.
  2. In the block settings, go to Typography → Font and change Default to the headline font.
  3. Select the subheading and set its font to the sub-headline font.
  4. Select the paragraph and set it to the body font.
  5. Click Update, then Preview.

The headline, sub-headline and body fonts show up on the front end right away.

Swap pairings with one click

This is where you save the most time. Your blocks point to the headline, sub-headline and body roles, not to specific fonts. So if you don't like the result, go back to Font Pairing, click Import Fonts Group on another set, and reload the page. All three fonts are replaced and you don't touch a single block. That makes it quick to try several pairings on your real design and keep the one that works.

The same workflow works in Gutenberg, Bricks Builder and Oxygen Builder: set up the font families once, then switch between pairings in one click.

Get Font Hero → dplugins.com

Related posts