Add Custom Fonts to Oxygen Builder in 2023

Fonts play a crucial role in enhancing the aesthetics and readability of a website. Oxygen Builder, as flexible and powerful as it is, doesn't provide native support for custom fonts.

These methods are easy, powerful, and fast. Here's how to do it

Method 1: Matthias Altmann Code Snippet

While Oxygen offers a ton of standard web-safe and Google Font options, they lack built-in support for custom fonts. It can be annoying to have to resort to plugins or manual CSS integration to utilize these fonts. Here's a code snippet solution devised by Matthias Altmann to seamlessly incorporate custom fonts. It's the officially recommended method from the Oxygen team & takes a few minutes to set up. Thank you Matthias!

Before starting this, please make sure plugins like "Elegant Custom Fonts", "Use Any Font", or "Swiss Knife" are deactivated. They don't work with the Code Snippet.

These instructions come directly from his website. You can also access the Web Font Loader for Google Fonts. (this will make sense in a few minutes)

Instructions

• Ensure you have the 'Code Snippets' or 'Advanced Scripts' plugin installed and activated.
• Download Matthias' code snippet (in JSON format).
• Import the JSON file into 'Code Snippets' or 'Advanced Scripts' and activate the snippet.
• Access any webpage on your site. This action will trigger the snippet to automatically generate a new directory (wp-content/uploads/fonts) on your server.
• Add your Font
  • For custom fonts, add them directly to the newly created directory.
  • For Google Fonts, use the Web Font Loader to download the desired Google Fonts in web-ready WOFF2 and WOFF formats.
• Once downloaded, unzip the file and upload the entire font folder to the wp-content/uploads/fonts directory on your server. The snippet will recognize all font files, weights, styles, and charsets from the included JSON file. Connecting with FTP was the easiest way of doing this.

By default, the snippet uses the WOFF2 format (supported by all major browsers since 2016). If your site needs to cater to older browsers or specific devices, adjust the configuration in the snippet using:

public static $wfl_support_woff = true; // Support old style WOFF files from Web Font Loader for browsers before 2016.

Under 'Appearance' in WordPress admin, locate "MA Custom Fonts" to get a quick overview.
Alternatively, use the shortcode ma-customfonts-test to test fonts on different devices.

If you intend to host Google Fonts locally, disable Google Fonts support in Oxygen via: Oxygen > Settings > Bloat Eliminator > Disable Google Fonts.

Method 2: YABE Webfont (Easier)

Hosting Google Fonts locally provides an edge in performance and GDPR compliance. YABE Webfont offers a seamless way to do this. I used this plugin since it came out but recently stopped using it with WordPress 6.3 because it screwed up my Gutenberg editor. I think it was just a bug and will be fixed soon, but didn't really want to wait. Plus if you don't mind doing a little installation, the code snippet from the first method is just more efficient.

How to Use:

1. Installation:
   • Install and activate the Yabe Webfont plugin.
2. Adding New Fonts:
   • Navigate to the fonts page.
   • Click 'add', provide a title, and upload your desired font variants.
   • You can preview, modify display settings, and preload fonts as needed.
3. Importing Fonts:
   • If importing directly from Google Fonts, use the search feature to find the desired fonts.
   • Add the font variants you wish to integrate.

Pricing

The plugin is priced at $19/year for personal use and $39/year for commercial sites. Lifetime plans, equivalent to four times the yearly price, are also available, offering lifelong support.

Method 3: Manual CSS Integration

For those who prefer a hands-on approach or have a specific customization in mind, integrating fonts manually using CSS is probably what you want to do.

Steps:

1. Font Files:
   • First, ensure you have the font files in web-ready formats like WOFF or WOFF2.
2. Upload Fonts:
   • Upload your font files to your server, preferably in a dedicated directory for organization.
3. CSS Integration:
   • In your stylesheet, use the @font-face rule to define the font:
   • @font-face { font-family: 'YourFontName'; src: url('path-to-your-font.woff2') format('woff2'), url('path-to-your-font.woff') format('woff'); }
4. Implement Font:
   • Now, apply the font across your site using (not with the body tag, but however you desire):
   • body { font-family: 'YourFontName', fallback-fonts; }

Remember, always check the license agreements of the fonts you're using. Some fonts may have restrictions on commercial use or web embedding.

I don't really like Oxygen's default font integration, but these are really the best options you have. Not sure if Oxygen is going to support native font uploading, but I highly doubt it after the snippet from Matthias came out. Hope this helped! Leave a comment with any questions.