Register a Font Family in WordPress with Font Hero

Self-hosting a custom font in WordPress usually means uploading files over FTP and writing @font-face rules by hand for every weight and style. Font Hero lets you register a font family from the WordPress admin: you name the family, add a font face for each weight and style, and pick the files in the normal WordPress media uploader. You never leave the dashboard, and any face can be changed later without starting over.

Add a font family

A font family groups all the files for one typeface under one name, so you set it up once and reuse it. If you haven't created a family yet, Font Hero shows You don't have any font family yet!.

1. Go to Tools → Font Hero.
2. Click + Add font family.
3. Enter a family name and save it.

Use a name that says what the font is for. We call ours Title because we use it for headings, which is easier to recognise later than the typeface name.

Add a font face

Each weight and style of a font is a separate file, and the browser has to know which file is which. After you save the family name, you choose between a static font face and a variable font. In this video we add static font faces.

Every face has these fields: Font Weight, Font is italic (Regular by default), Upload files, Font Display, Preload and Enter selectors comma separated. By default the upload button only accepts Woff2. We show how to allow more file formats in a separate video.

Add the regular weight

Start with the regular weight, because most of your text will use it.

1. Set Font Weight to 400.
2. Click the Woff2 upload button. The standard WordPress media uploader opens.
3. Upload the regular file (we use SourceCodePro-Regular.woff2) and click Choose Images.

The files go in through the media library, so you don't need an FTP client or an extra upload plugin. On this face we set Font Display to Swap. We'll cover the display options in detail in a later video.

Add italic and black

Most designs need more than one weight or style, and every file has to be matched to the right weight and style, or the browser will pick the wrong one.

1. Click + Add Font Face again. For the italic, set Font Weight to 400 and tick Font is italic.
2. In the uploader you can drag several files in at once (we drop in the Regular, Italic and Black WOFF2 files), then choose the one this face needs.
3. Add a third face for the black weight. If you're not sure which number a weight uses, look it up in the font's specification. For Source Code Pro, Black is 900.
4. Click Save.

The family now lists 400 Normal Swap, 400 Italic and 900 Normal. Each row has Edit and Delete buttons, so if something is wrong you click Edit, change it and save again. You don't have to rebuild the family.

Get Font Hero → dplugins.com