Custom Fonts in Oxygen Builder with Font Hero
Custom fonts in Oxygen Builder often mean two font sources on one site: Oxygen still loads Google Fonts while your self-hosted fonts load separately. This video shows how to stop Oxygen loading Google Fonts, register a font once in Font Hero, and use it in Oxygen on a single element or across the whole site from Global Styles. You get one font source, and the font you see in the builder is the font that loads on the front end.
Disable Google Fonts in Oxygen's Bloat Eliminator
If Oxygen keeps loading Google Fonts while Font Hero serves your own files, your pages download fonts they don't use. Turn Oxygen's Google Fonts off first so nothing loads twice.
- In WordPress, go to Oxygen → Settings.
- Open the Bloat Eliminator tab.
- Disable Google Fonts.
- Click Save Changes.
Oxygen no longer loads any fonts from Google.
Register a font family in Font Hero
The font needs to be registered once so Oxygen can list it by name.
- Go to Tools → Font Hero.
- Name the font family. In the video it's Test Title.
- Click + Add Font Family and pick your font files. We use BP Diet, which we'd already converted.
- Set font-display to swap.
- Click Save.
Apply the font to an element in Oxygen
Now you can see if the font works on a single element before rolling it out.
- Open the page in the Oxygen editor and select an element. We select the Heading "The Best Brewery Ever".
- On the Primary tab, open Font Family and choose Test Title.
The font changes right away in the builder. Save the page and it loads on the front end too.
Apply the font globally with Oxygen Global Styles
Setting the font element by element is slow, and it's easy to miss one. Oxygen's global settings let you set it once for the whole site.
- Open Settings → Global Styles → Fonts.
- Set Display font (the font for titles) to Test Title. Every title on the site updates at once.
- You can also set Text font (body text) to the same font. BP Diet isn't a good body font, but the demo shows you can apply a font globally in one click.
Fix an element that overrides the global font
One element, the "Winter Ale" text block in the beer chart, didn't pick up the global font. Its Font Family is set to Inherit, but it uses a class that sets its own font family, so the class wins. We apply the font to it directly and reload, and it works. When one element ignores your global font, look for a class that sets its own font family.
Who is this for
- Oxygen Builder users who want to self-host fonts without Oxygen loading Google Fonts too.
- Site builders who want to set title and body fonts once in Global Styles instead of editing every element.
- Anyone using an Oxygen design set that ships with its own font settings.
FAQ
How do I stop Oxygen Builder from loading Google Fonts?
Go to Oxygen → Settings → Bloat Eliminator, disable Google Fonts, and click Save Changes.
Do Font Hero fonts show up inside the Oxygen editor?
Yes. After you register a font family in Font Hero, it's listed in the element's Font Family dropdown and in Global Styles → Fonts. The font shows in the builder right away and loads on the front end after you save.
How do I set one font for every heading in Oxygen?
Open Settings → Global Styles → Fonts and set Display font to your Font Hero font. Use Text font for body text.
Why does one element still show the old font after I set it globally?
That element probably has a class that sets its own font family. Apply the font to the element or its class directly, then reload.
Get Font Hero → dplugins.com
