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.
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 your web project in Adobe fonts.
- Choose which form of embed code you want to use.
- 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.
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.
The following code shows an example CSS rule where the font applies anywherein the body of the page.