← All posts

Remove Font Hero from Production and Keep Your Fonts

font hero

Once a site is finished and handed to the client, every active plugin is one more thing to update. If the typography is done, Font Hero doesn't need to stay active. In this video we copy the font CSS that Font Hero generated, load it from a static file or an inline style, and deactivate the plugin. The fonts stay the same, and the production site has one plugin fewer.

Only do this when the site is done. After Font Hero is deactivated, you can't manage fonts in it anymore. You'd have to turn it back on and export the CSS again.

Find the CSS Font Hero generates

Font Hero writes all your @font-face rules into one stylesheet. That file is what you need to copy. You don't need to rebuild anything by hand.

  1. Check Font Hero's features. In our example, inline CSS is not enabled, so the fonts load from a separate CSS file.
  2. Open the front end of the site and use View Page Source.
  3. Find the Font Hero stylesheet. In the demo it's /wp-content/uploads/font-hero/font-hero.css?ver=….
  4. Open that file and copy its full contents.

The file is plain CSS, one @font-face block per font, weight and style. This is the first block from the demo:

@font-face {
    font-family: 'Subheadline';
    font-weight: 400;
    font-style: normal;
    src:    url(http://font-hero.local/wp-content/plugins/font-hero/fontPairing/files/Lora/Lora-Regular.woff2) format('woff2');
}

The Google Fonts that Font Hero downloaded point to /wp-content/uploads/font-hero/google-fonts/… and also include font-display: swap;.

Load the CSS from Scripts Organizer

The CSS needs somewhere to live once the plugin is off. We use Scripts Organizer here, but any code snippet plugin or your theme will work.

  1. Create a new code block and give it a title, for example Fonts.
  2. Choose CSS as the language. You don't need SCSS here.
  3. Set Script Location to Header.
  4. Leave Create file checked so the CSS is served as a static file.
  5. Paste the CSS and publish.

Deactivate Font Hero and test

Before you rely on the static file, check that it's actually the thing loading the fonts.

  1. Go to Plugins and deactivate Font Hero.
  2. Reload the front end. The fonts should look the same as before.
  3. To test it, disable the Scripts Organizer code block and reload. The custom fonts disappear. Enable it again and they come back.

On screen we deactivate Font Hero and don't delete it. Some URLs in the CSS point inside wp-content/plugins/font-hero/, such as the font pairing files. If you delete the plugin, those files are deleted too.

Optional: inline the CSS

A separate CSS file means one more request. The font rules are small, so you can put them straight into the page instead.

  1. Open the code block and uncheck Create file.
  2. Save and reload the page.

Now View Page Source shows the whole list of @font-face rules in a <style> tag in the head. In the demo we add a /* SCORG FONTS */ comment so the block is easy to find.

Who is this for

  • Freelancers and agencies handing a finished site to a client who want fewer plugins to maintain.
  • Site builders who set up typography with Font Hero and don't expect to change it again.
  • Anyone who wants self-hosted fonts from a small inline <style> block instead of a plugin and an extra CSS request.

FAQ

Can I use Font Hero only during development? Yes. Set up your fonts with Font Hero, copy the CSS it generates, load that CSS some other way, then deactivate the plugin on the live site.

Where do I find the CSS Font Hero creates? View the page source on the front end and look for font-hero.css in /wp-content/uploads/font-hero/. Open it and copy everything.

Do I need Scripts Organizer for this? No. We use it in the video, but any code snippet plugin, a code editor or your own plugin can load the CSS in the header.

Should the font CSS be a file or inline? Both work. Inlining the CSS (unchecking Create file in Scripts Organizer) saves a separate request, which gives you a small performance gain.

Can I delete Font Hero after this? The video only deactivates it. Some font files are loaded from the plugin's own folder, so deleting the plugin would break those URLs unless you move the files first.

Get Font Hero → dplugins.com

Related posts