In Appearance » Theme Options » Typography tab, you’ll find all the settings related to your site’s typography.

By default, your theme lets you choose from Google Fonts, Adobe Fonts, and web-safe fonts for your Headings, Body, and Accent font slots. But if you have a specific font you’d like to use — maybe your brand’s typeface or a font you’ve purchased — you can upload it directly.

Uploading your font files

Scroll down to the Custom section within the Typography tab. There you’ll find the Upload Custom Fonts option, where you can add one or more font files. For each font file you upload, you’ll fill in four fields:

• Font name — A friendly label for your own reference. This is what you’ll see in the admin when selecting fonts, so use something descriptive like “Montserrat Regular” or “Montserrat Bold Italic”. It can be anything you want.
• Font family name — This is the name that will be used in CSS. It can also be anything you want — it doesn’t need to match the font’s original name. Just avoid using spaces. For example: Montserrat, MyBrandFont, or MainTypeface.
• Weight & Style — Select the weight and style that matches the font file you’re uploading. If you’re uploading a bold file, choose 700. A light italic? 300 Italic. This tells the browser when to use each file.
• File upload — The font file itself. Use .woff2 files whenever possible for better performance.

Uploading multiple weights and styles

Most typefaces come in several versions — regular, bold, light, italic, and so on. Each one is a separate file, so you’ll need to add a separate row for each version. Click Upload another font to add more rows.

Here’s the key: use the exact same Font family name across all versions of the same typeface. This is how the browser knows they all belong together as one font family. Then, differentiate each row by selecting the correct Weight & Style and uploading the corresponding file.

For example, if you wanted to upload three versions of a font called Montserrat, your rows would look like this:

Notice that the Font family name is identical in all three rows — Montserrat — while the Font name is different in each one, just to help you tell them apart in the admin.

With this setup, the browser will automatically use the correct file depending on whether your content calls for regular, bold, or italic text.

Applying a custom font to your site

Once you’ve uploaded your font files and saved your settings, go back to the top of the Typography tab. For any of the three font slots — Headings, Body, or Accent — select Custom as the font type. A dropdown will appear listing the fonts you uploaded. Pick the one you’d like to use, save, and you’re all set.

Note: If you uploaded multiple weights of the same font, you may see each one listed separately in the dropdown (e.g., “Montserrat Regular”, “Montserrat Bold”). Don’t worry — since they all share the same Font family name, it doesn’t matter which one you pick. They’ll all work together as a single font family.

Quick summary

1. Go to Appearance » Theme Options » Typography » Custom section.
2. Add a row for each font file (one per weight/style).
3. Use the same Font family name for all versions of the same typeface. No spaces.
4. Select the matching Weight & Style for each file.
5. Upload .woff2 files when possible.
6. Go back up and set any font slot (Headings, Body, or Accent) to Custom, then pick your font from the dropdown.