Pricing
Written by Editorial Team on June 12, 2020

How To Use Adobe Fonts With Beaver Builder?

Having Adobe Fonts have several advantages over Google Fonts especially when it comes to website loading speed. If you are using Beaver Builder to build WordPress sites, you can easily use Adobe Fonts with Beaver Builder by modifying the CSS.

If this sounds like a tough, don't worry. In this tutorial, we'll guide you how you can easily add Adobe Fonts to WordPress websites in just a few steps.

What are Adobe Fonts?

What Are Adobe Fonts
~What are Adobe Fonts?

Adobe Fonts is an online service which offers a subscription library of high-quality fonts. The fonts may be used directly on websites or synced via Adobe Creative Cloud to applications on the subscriber's computers.

Instead of using Google Fonts to load unique font types, Adobe Fonts is a great alternative for website designers that you can easily integrate to your WordPress site.

How to use Adobe Fonts with Beaver Builder?

Follow these steps to quickly set up Adobe fonts to work with Beaver Builder:

  • Ensure that Google fonts don't load in order to maximize page load time
  • Construct a web project for the font at the Adobe Fonts site
  • Copy the embed code in your Adobe fonts web project and paste it into the appropriate Customizer location
  • Add CSS rules that will determine where the Adobe font is used

If you are using Beaver Builder, these steps will get Adobe Fonts working for your site. However, these are also very useful especially when you are using other WordPress themes.

Step 1: How to remove Google Fonts from WordPress?

Here's the bad thing about using Google Fonts for WordPress.

If your WP theme is currently using a Google Font for your heading or body font, it will still be loaded even after being overridden with an Adobe font, which can slow down your page load time. Here's how to stop the Google font from loading by removing Google Fonts completely.

  1. Head over to Customize » General.
  2. If you plan to use an Adobe font for the headings, click Headings, then for Font Family select one of the system fonts, such as Verdana.
  3. If you plan to use an Adobe font for body text, click Text, then for Font Family select one of the system fonts, such as Verdana.
  4. Click Save and Publish.

Once these steps are completed, you will notice that the fonts on your site had been changed to the system font.

Step 2: Create a web project and get the embed code for Adobe Fonts

  1. In order to use Adobe Fonts in WordPress, you need to first create a web project in Adobe Fonts (click here).
  2. Next, choose which form of embed code you want to use (click here).

If you want to load an East Asian font, copy the embed code following the instructions in the section called "JavaScript embed code." Otherwise, copy the embed code following the instructions in the section called "Default embed code."

Step 3: Adding the embed code to the WordPress Customizer

  1. Login to your WordPress dashboard and head over to Customize » Code » Head code. The embed code needs to be pasted into the <head> area of the web page.
  2. Paste in the Adobe embed code, either the Default code or the JavaScript code. Make sure the JavaScript is wrapped in <script> tags when you paste it into the Head code location.

Step 4: Add CSS rules to determine where the Adobe Font is used

There are several places you can add custom CSS and here are several examples.

Heading Font CSS example

The following example rule selects the headings to which the font applies, in this example a font called proxima-nova. It also specifies a fallback font if proxima-nova isn't found. In this example, the fallback is the generic family sans-serif, and the exact sans-serif font is left to the user's browser to decide.

h1, h2, h3, h4, h5, h6 {
  font-family: 'proxima-nova', sans-serif;
}

Body font CSS example

The following code shows an example CSS rule where the font applies anywhere in the body of the page.

body {
  font-family: 'proxima-nova', sans-serif;
}

Recap

Adding Adobe Fonts to WordPress websites using Beaver Builder is easy with the above steps. We hope that you find this WordPress tutorial useful and drop us a comment if you need any help!

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

crossmenu