← All posts

Use Font Hero Fonts in Tailwind CSS with Winden

font hero

If you build with Tailwind CSS in WordPress, your self-hosted fonts and your utility classes often live in separate places. You end up writing custom CSS just to get a font onto a heading. This video shows how to reference a Font Hero font family directly in Winden's Tailwind config, so a class like font-headline works in Gutenberg and on the front end. Your fonts stay local, and applying them takes one class.

Tailwind's font-family quoting rules

If a font name is quoted the wrong way, Tailwind outputs broken CSS and the font silently falls back. So check the rules before you touch the config.

The Tailwind CSS docs (Typography → Font Family → Customizing your theme) show custom families added to theme.fontFamily:

'display': ['Oswald', ...],
'body': ['"Open Sans"', ...],
  • A one-word font name goes in single quotes: 'Oswald'.
  • A name with spaces needs double quotes inside the single quotes: '"Open Sans"'.

The docs also say that font families can be an array or a comma-delimited string, and that Tailwind does not escape font names for you.

Pick a Font Hero pairing and find its CSS name

You need the exact family name Font Hero registers. Otherwise your Tailwind class points to a font that doesn't exist.

  1. Go to Tools → Font Hero and open the Font Pairing tab.
  2. Choose a pairing (Playfair Display, Chonburi, Oswald, Bebas and others are listed) and click Import Fonts Group.
  3. Open the front end and look at the generated stylesheet (/wp-content/uploads/font-hero/font-hero.css).

A pairing registers three roles: Headline, Subheadline and Body. The stylesheet contains the @font-face rules plus helper classes like this:

.has-headline-font-family{
        font-family: 'Headline';
}

The family name is Headline. It's one word, so it only needs single quotes in Tailwind. And because Font Hero uses these role names instead of the actual font names, your Tailwind config never mentions a specific font.

Add the font family to Winden's Tailwind config

This step turns the Font Hero font into a normal Tailwind utility, so you don't have to write any custom CSS for it.

  1. Go to Winden → Settings → Tailwind Config.
  2. Inside theme.extend, add a fontFamily object.
  3. Add a key for your font (we named it headline) and set its value to 'Headline', followed by fallbacks such as Helvetica, Arial and sans-serif.
  4. Click Save Changes.

In the video we started with a capitalized Headline key, then switched to lowercase. A lowercase key gives you a cleaner class name: font-headline.

Apply the class to a block

With the config saved, you style text by adding a class, the same way you use any other Tailwind utility.

  1. Select the block in the editor (a Heading in the video).
  2. Open Advanced → Additional CSS class(es).
  3. Add font-headline. You can combine it with other utilities. We used font-headline text-7xl.
  4. Update the page and preview it.

The front end showed the new headline font right away.

Enable Gutenberg integration to see fonts in the editor

The front end updated, but the editor still showed the old font. That makes you design blind. Winden only loads its CSS in the block editor when you turn that on.

  1. Go to Winden → Settings → General.
  2. Enable the Gutenberg integration option and save.
  3. Reload the editor.

Now the font-headline class renders in Gutenberg too, so the editor matches the front end.

Swap the font pairing without touching Tailwind

This setup makes it easy to change fonts. Your Tailwind config points to the role name (Headline), not to a specific font, so you can change typefaces without editing any classes.

  1. Go back to Tools → Font Hero → Font Pairing.
  2. Import a different pairing.
  3. Reload the editor and the front end.

Both update to the new fonts. The Winden config and the classes on your blocks stay the same.

Who is this for

  • Tailwind CSS users on WordPress who use Winden and want self-hosted fonts available as utility classes.
  • Site builders trying font combinations who want to swap a whole headline/sub-headline/body pairing without editing classes.
  • Gutenberg users who want the editor preview to match the front end instead of checking every change in a new tab.

FAQ

How do I add a custom font to Tailwind CSS in WordPress? Find the font-family name your font is registered under (Font Hero shows it in its generated CSS). Then add it to theme.extend.fontFamily in Winden's Tailwind Config, save, and use the generated font-[name] class on your blocks.

Why do some Tailwind font names need double quotes? Tailwind doesn't escape font names. A single-word name like 'Oswald' only needs single quotes. A name with spaces needs double quotes inside single quotes, like '"Open Sans"'.

Why does my Tailwind font show on the front end but not in the Gutenberg editor? Winden's Gutenberg integration is turned off. Enable it under Winden → Settings → General, save, and reload the editor.

Do I need to update the Tailwind config when I change fonts in Font Hero? No. Font Hero pairings register role names (Headline, Subheadline, Body). Your config points to the role, so importing a new pairing changes the font everywhere and your config stays the same.

Get Font Hero → dplugins.com

Related posts