In this article we're going to discuss how to add custom fonts to the Oxygen Builder.

We used Oxygen Builder to create our website, and incorporated method to when adding custom fonts to our website.

Method 1: Elegant Custom Fonts Plugin

The official way to add custom fonts to the Oxygen Builder is using the elegant custom fonts plugin, which is created by the same development team. Unfortunately, it doesn't usually work, and you may just want to skip to method two.

Let's cover it here anyway. First, install the plugin, then upload your font (it only supports .WOFF and .WOFF2). Once the font is uploaded, save all of the settings, and it should display in the font selection interface within Oxygen Builder.

This plugin only supports modern versions of the fonts, meaning that they won't apply to Internet Explorer or older versions of Microsoft Edge. For many, this is a deal breaker.

Additionally, the elegant custom fonts plugin doesn't even work for us. We're not sure if it is a plugin conflict on our website, or if it's just outdated, so we use an alternative method to add custom fonts to the Oxygen Builder.

Method 2: Custom Fonts Plugin

This is the method that we use to incorporate custom fonts into our website which is created with Oxygen Builder. The custom fonts plugin is one of the more popular offerings out there, and allows you to upload whatever format of font you have.

The General Steps

Install the custom fonts plugin, upload multiple formats up your font (this will make it support all major browsers), And name it.

The drawback with this plugin is that it will not show up in the Oxygen Builder font selector. Instead, when adding fonts in Oxygen Builder, they need to “inherit” the general styling. Then, with custom CSS, you can apply the font family to selectors such as Body, P, SPAN, or more.

You do this by using font-family:(the name of the fonts specified within the custom fonts plugin).

Method 3: Straight up CSS

If you're strictly anti plugin, you can use straight up CSS to add custom fonts to your website. This is actually standard in the web design community, and most designers who don't use the CMS will incorporate custom fonts using a font face. You can do this too.

This is basically manually doing what the first two WordPress plugins do. We recommend finding a tutorial on line which gives you a detailed walkthrough on how to do this , but here are some general steps.

First you need to download your font. After downloading the font, create a web font kit using this online tool. https://www.fontsquirrel.com/tools/webfont-generator

Then, using FTP, upload the font files to your WordPress uploads folder. These files need to be publicly accessible via HTML. Ensure that you know the URL path where they are located, as you will need to use that in the next step.

Then, open the global CSS stylesheet in the Oxygen Builder and add these fonts to your website using a font face rule. It should look something like this.

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}Code language: CSS (css)

These import the fonts into the website, but don't specifically apply the fonts to any elements of the site. To do this, you need to declare the font family for specific CSS elements on your Oxygen website (how to do this was discussed above in method two).

Conclusion

The Oxygen Builder is an amazing tool that you can use to create anything you want (website wise). unfortunately, the font management aspect of it can definitely be improved.

These are the three major methods that you can use to incorporate fonts into your website created with Oxygen Builder, but hopefully in the future there will be a native integration (Similar to the one that Elementor has) which we can use to add fonts which can be directly selected from the Oxygen Builder).

If you have any questions about adding custom fonts to your Oxygen website, feel free to reach out in the comments below.