Using Custom Fonts with Oxygen Builder
In this tutorial, we will guide you through the process of using custom fonts with Oxygen Builder. We will be installing one of Oxygen Builder’s design sets, disabling Google fonts, registering a custom font, and applying it globally within Oxygen.
Step 1: Install a Design Set
Begin by installing one of Oxygen Builder’s design sets, which will serve as the foundation for your website.
Step 2: Disable Google Fonts
Navigate to the Oxygen settings, and click on the “Bloat Eliminator” tab. From there, disable Google fonts and click “Save.” This step ensures that no fonts are loaded from Oxygen by default.
Step 3: Register a Custom Font Family
To register a custom font family, head over to the “Appearancce” tab and click on “Font Hero.” In this example, we will register a font called “BP Diet.”
After converting the font file to a suitable format, click on “Choose” and select your custom font. Set the font-display property to “Swap” and click “Save.”
Step 4: Apply the Custom Font in Oxygen Builder
Open a page with Oxygen Builder and select the desired element. Choose the custom font, “Test Title” in this case, and you will see it loaded immediately within the builder. Click “Save” to apply the changes.
The custom font will now be displayed on the frontend of your website as well.
Step 5: Apply the Custom Font Globally
For best practices, Oxygen Builder provides global settings for applying custom fonts. To apply your custom font globally, go to “Settings,” followed by “Global Styles,” and click on “Fonts.”
Under “Text” and “Display Font,” select your custom font (e.g., “Test Title”) and click “Save.” This will apply the custom font to all titles across your website automatically.
To apply the custom font to the body text, simply select it from the “Body Font” option. Although our example font may not be suitable for body text, this step demonstrates the flexibility of applying custom fonts across your site with just a few clicks.
Troubleshooting Font Overrides
In some cases, your custom font may not be applied to specific elements due to existing CSS classes that override the font family. To resolve this issue, simply edit the relevant class and apply your custom font as needed. After saving your changes, refresh the page to see the updated font display.
In conclusion, Oxygen Builder makes it easy to register and apply custom fonts to your website, both on individual elements and globally. By following these steps, you can create a unique and cohesive design that reflects your brand’s personality.