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 o it.

  1. Go to Customize > General. (See the Related Articles for how to open Customizer.)
  2. 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.
  3. 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.
  4. Click Save and Publish.

Grab embed code and font family from TypeKit

  1. Create your kit in TypeKit.
  2. Grab the embed code for your kit from the Default embed code box, as shown in this screenshot.
  3. In the  Weights & Styles section in the left sidebar, click Using weights & styles in your CSS. Take note of the font-family as you'll need it later. We’re using the Proxima Nova font in this example, and the font family is proxima-nova.

font-family

Add TypeKit to the Beaver Builder theme

  1. Go to Customize > Code > Head code.
  2. Paste in the TypeKit embed code.
  3. Go to Customize > Additional CSS
  4. 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.

Body Font

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

Heading Font

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