Load and use Google fonts not available in Beaver Builder Theme

If the Google font you want to use is not listed in the dropdown list at Customize > General, it's very easy to add it.

Note: As of Beaver Builder Theme 1.6 and Beaver Builder Plugin 1.10, calls to Google fonts are combined into a single call, which facilitates faster page load times. if you add Google fonts using the procedure in this article, the calls for those fonts will be made independently. The Google fonts in Beaver Builder Plugin and Theme are frequently updated, so check back in future releases to see if this customization is still necessary.

Tip: Be careful about using too many different fonts if you're trying to pare down page load times. Each font loads separately. You can also check load times of your combination of Google fonts at fonts.google.com.

Load the font

  1. At fonts.google.com, go to the page listing the font you want to use, and click Select this font.
  2. Click the Family selected box in the lower right corner to open the information about how to use the font.
  3. On the Embed tab, copy the <link> embed code. In this example, the Cormorant font has this embed code:
    <link href="https://fonts.googleapis.com/css?family=Cormorant" rel="stylesheet">
  4. Go to Customize > Code > Head code and paste in the embed code. 

Write the CSS rule

  1. Back at the Google font family page, copy the code from the Specify in CSS section. In this example, it's as follows:
    font-family: 'Cormorant', serif;
  2. Add the following CSS code, substituting the name of your Google font.
    See the article on where to add custom CSS code.
/* Add Cormorant Google font */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant', serif;
}