Need a second opinion on your design? Get expert feedback

GeneratePress

Using GeneratePress Premium’s Font Library (Upload a Custom Font)

Adam Wright

by Adam Wright

One of the great features of GeneratePress Premium is the font library introduced in version 2.5. It allows you to upload a custom font, enable Google Fonts, and add any font with the select font weights you’d like to be loaded on your site — plus an array of additional settings.

Today I want to show you an overview of the font library, how to use it, upload a custom font, plus something else to look for if you’re running into an issue loading your fonts.

Enabling the Font Library Module in GeneratePress Premium

The font library is part of GeneratePress Premium, so first make sure you have the GP Premium plugin installed. Then go to Appearance > GeneratePress. Under the list of modules, just below Elements, you’ll find the Font Library. Go ahead and click Activate.

Now if you click on Appearance again and refresh, you’ll see the Font Library listed under the Appearance menu.

This is where you’ll see installed fonts once they’re active, upload custom fonts, and install Google Fonts.

Installing a Google Font for Body Copy

Let’s start by installing a Google Font. I’m going to use one for my body font and then upload a custom font for my headings.

To allow access to Google Fonts, click the button at the top of the screen.

Under Google Fonts, I’m going to search for “Inter” — a sans serif font I use pretty often for body copy. I’m going with the 300 font variation, and as you can see, you can pick and choose as many as you’d like.

My recommendation is to only choose the ones you know you’re going to use, because you don’t want extra font weights loading on your site.

I’m only going to choose 300, since that’s all I need. Click “Install Selected.” You’ll see a success message at the top.

Switch over to the Font Library tab, and now you’ll see Inter is installed.

Font Settings and Advanced Options

When you click into the font, there are a few options:

  • Font status: leave this enabled if you’re using the font
  • Font variants: shows the specific weight(s) you installed
  • Advanced options:
    • Font display: choose “swap” for best performance
    • Font alias: lets you rename the font if desired
    • Font fallback: enter something like “sans-serif”
    • CSS variable suffix: leave it as is unless you need to call to it with a different name in CSS

I personally leave most of these options alone and stick with the defaults so I don’t confuse myself. Once you’re happy with the settings, click Save.

Uploading a Custom Font for Headings

Next, I’m going to upload a custom font to use for my headings.

They recommend uploading fonts as TTF, WOFF, or WOFF2. WOFF2 is usually ideal for web use.

Using my Envato Elements subscription, I found a font I liked called “Neuething Sans Family.” I’ve already downloaded it and extracted the font files. I’m going to use the Black Expanded version.

Just drag the font file into the uploader. You’ll see a confirmation that the fonts were uploaded successfully.

If we go back to the Font Library, the new font will be listed. Click into it, and you’ll see the only available variant is Black 900. Set the font display to “swap” again, and click Save.

Applying Fonts in the GeneratePress Customizer

Now that we’ve installed our fonts, we’re ready to apply them using the customizer.

I’ve set up a sample page with various headings (H1 through H5) and body text so we can see the changes.

Jump into the WordPress Customizer, then go into Typography.

You’ll now see both the Google font and the custom font listed under the font manager.

First, add typography for the body. Choose “Inter” as the font family. On the preview page, the body text will automatically update. I’m using a 300 weight and will set the font size to 1rem.

Next, add typography for the headings. Choose “All Headings” as the target and select your custom font for the font family. Again, the headings on the preview page will update accordingly.

Now, if you publish these changes and navigate through your site, you’ll see that all the headings and body text are using your new fonts.

What to Do If Fonts Stop Rendering

If your fonts aren’t displaying properly after pushing your site live — or even mid-development — here’s something to try.

Go back into the Font Library. Under Font Status, disable the font, save the change, then re-enable it and save again.

That action will regenerate the CSS files associated with the font, which can often fix rendering issues.

Wrapping Up

GeneratePress Premium’s font library makes it easy to:

  • Add fonts (Google or custom)
  • Choose only the weights you need
  • Set performance preferences like font display swap
  • Apply fonts via the Customizer

It’s a simple, performance-friendly way to manage your typography without loading unnecessary font files.

Let me know if this helps or if you run into any other issues when working with the Font Library in GeneratePress Premium.

Subscribe

Follow My YouTube Channel for More Tutorials

Subscribe to Channel
Adam Wright

About the Author

Adam Wright

Adam is a California native, now living in Middle Tennessee. A long-time creative at heart, his passion for design and growing his small business, AWD, is always evident. When he's not writing code or sketching logos, he enjoys spending time with family, playing basketball, or watching just about any motorsports. Find him on LinkedIn.