Load and use TypeKit fonts
TypeKit is a fantastic font service from Adobe. Using TypeKit with Beaver Builder is quite simple.
Get rid of Google fonts first
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 a TypeKit font, which can slow down your page. Here's how to get rid of it.
- Go to Customize > General. (See the Related Articles for how to open Customizer.)
- If you plan to use a Typekit font for the headings, click Headings, then for Font Family select one of the system fonts, such as Verdana.
- If you plan to use a Typekit font for body text, click Text, then for Font Family select one of the system fonts, such as Verdana.
- Click Save and Publish.
Grab embed code and font family from TypeKit
- Create your kit in TypeKit.
- Grab the embed code for your kit from the Default embed code box, as shown in this screenshot.
- the Weights & Styles section in the left sidebar, click Using weights & styles in your CSS. Take note of the font family because you'll need it later. We’re using the Proxima Nova font in this example, and the font family is proxima-nova.
- Add TypeKit to the Beaver Builder theme
- Go to Customize > Code > Head code.
- Paste in the TypeKit embed code.
- Go to Customize > Additional CSS.
- Paste the following CSS code, depending on whether you want to use TypeKit font for headings, body text, or both. Change the font-family depending on which font you chose.