← All posts

Add a Custom Font in WordPress with Font Hero 2.0

font hero

Self-hosting your own font files in WordPress usually means writing @font-face rules by hand for every weight and style, and then keeping track of where each file lives. Font Hero 2.0 has an Add Custom Font workflow for this. You register a font family once, attach a WOFF2 file for each weight and style, set the font display, and manage all of it from one screen. You don't write any CSS or FTP any files.

In this video we register Source Code Pro as a custom font family and add three font faces: regular, black (900) and italic.

Add Custom Font vs. Add Google Font

In earlier versions, the same button was used whether you were uploading your own files or pulling from Google Fonts, which made it unclear which one to click. In Font Hero 2.0 the old Add Font Family button is renamed to Add Custom Font, and it sits next to Add Google Font.

On a fresh install, under Tools → Font Hero, you'll see a box that says You don't have any font family yet! with both buttons. Use + Add Custom Font when you have your own font files.

Register the font family name

The family is the container that holds all the weights and styles of one typeface, so you create it first.

  1. Click + Add Custom Font.
  2. Type the font family name in the title field.
  3. Click Save.

The family is now saved, and Font Hero shows the notice Font Family is empty. Add font face or variable font. Below it you'll find two buttons: + Add Font Face and + Add Variable Font. In this video we use a static font face.

Add a font face (weight, file, font display)

Each weight and style of a static font is its own file, and each file needs the correct weight value so the browser uses the right one.

  1. Click + Add Font Face.
  2. Under Font Weight, choose the weight. For the regular file, pick the regular (400) weight.
  3. Leave Font is italic (Regular by default) unchecked for upright styles.
  4. Under Upload files, click the Woff2 button. By default only WOFF2 uploads are available.
  5. Upload the file. This opens the native WordPress media modal, so you can drag and drop the .woff2 file straight in from Finder or Explorer, then click Choose Images.
  6. Under Font Display, choose swap. This is the setting we recommend for performance.
  7. Click Save.

The font face form also has a Preload checkbox and an Enter selectors comma separated field (for example h1, h1 bold, h1 italic, .large-title). The video doesn't cover those.

Add more weights and styles to the same family

Most designs need more than one weight, and each weight should live under the same family so your CSS stays consistent. Just add another font face:

  • Black: add a font face, set the weight to 900, upload the Black WOFF2 file, set Font Display to swap and save. If you're not sure which number a style name maps to, check the font's Google Fonts page. It lists Black as 900.
  • Italic: add a font face, set the weight to 400, tick Font is italic, upload the italic file, set swap and save.

Edit or delete a font face or the whole family

If you uploaded the wrong file or picked the wrong weight, you can fix it here without starting over:

  • Click Edit on a font face, change it, and click Save.
  • Delete a single font face if you don't need it.
  • Click Delete Family to remove the whole font family.

When no font family is registered, the actions are shown in the centered box. Once a family exists, + Add Custom Font and + Add Google Fonts move to the top bar next to the Font Hero logo, so the font list gets more space.

Who is this for

  • Site builders with licensed or custom fonts who need to self-host files that aren't on Google Fonts. You upload them and don't write any @font-face CSS.
  • Developers managing multiple weights and styles. Every font face of a family sits in one list and can be edited or deleted there.
  • Anyone who cares about font loading. You set font display to swap for each face as you add it.

FAQ

How do I add a custom font to WordPress with Font Hero? Go to Tools → Font Hero, click + Add Custom Font, give the family a name and save. Then click + Add Font Face, choose the weight, upload the WOFF2 file, set Font Display to swap and save.

What happened to "Add Font Family" in Font Hero? In Font Hero 2.0 it was renamed to Add Custom Font. This separates uploading your own font files from adding Google Fonts.

Which file format does Font Hero accept for custom fonts? By default the upload button is set to WOFF2. The file goes through the native WordPress media uploader, so drag and drop works.

How do I add bold, black or italic versions of a font? Add another font face to the same family for each file. Set the matching weight (for example 900 for Black), and tick Font is italic for italic files.

Which font-display value should I use? In the video we pick swap for every font face, because it's the best option for performance.

Get Font Hero → dplugins.com

Related posts