Setting up Adobe fonts to work with Beaver Builder involves the following steps:
- 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.
These instructions assume that you have the Beaver Builder Theme, but you should be able to follow similar steps for most other themes.
Get rid of Google fonts
If your 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..
- Go to Appearance > Customize > General.
- 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.
- 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.
- Click Save and Publish.
Create a web project and get the embed code
- Create your web project in Adobe fonts.
- Choose which form of embed code you want to use.
Add the embed code to Customizer
- From the WordPress admin pamel, go to Customize > Code > Head code.
This ensures the code is pasted into the
<head>area of the web page.
<script>tags when you paste it into the Head code location.
Add CSS rules to determine where the font is used
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. The exact sans-serif font is left to the user's browser to decide.
Body font CSS example
The following code shows an example CSS rule where the font applies anywherein the body of the page.