Skip to main content

Add web fonts - Complex example

This article shows an example of configuring a set of web fonts with two styles and multiple weights to work in Beaver Builder. You'll follow the same procedure as in the basic article, but with more tweaks, as described here.

Example of a font with two styles and four weights​

Fonts that have multiple weights and styles are usually provided as separate web font files for each weight and each style. We'll use as an example a premium font called TT Prosto Sans Condensed, which included a license for web fonts. This font has both a regular and an italic style and a number of font weights, from which we'll choose normal and bold.

We uploaded the .otf font file to the FontSquirrel Webfont Generator to generate a web font kit, in the form of a zip file. This produced files for all the styles and weights in both .woff and .woff2 formats, and we uploaded those files to wp-content/themes/bb-theme-child/fonts.

Then we extracted the stylesheet.css file from the kit and started with the @font-face for each of the four style and font combinations: Regular, Italic, Bold, and Bold Italic:

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */

@font-face {
  font-family: 'tt_prosto_sans_condensedBdIt';
  src: url('prostosanscond-bold-italic-webfont.woff2') format('woff2'),
       url('prostosanscond-bold-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tt_prosto_sans_condensedbold';
  src: url('prostosanscond-bold-webfont.woff2') format('woff2'),
       url('prostosanscond-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tt_prosto_sans_condensedIt';
  src: url('prostosanscond-italic-webfont.woff2') format('woff2'),
       url('prostosanscond-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tt_prosto_sans_condensedRg';
  src: url('prostosanscond-regular-webfont.woff2') format('woff2'),
       url('prostosanscond-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Decide how to divide styles and weights​

You'll notice that the CSS rules generated in the web font kit show each style and weight as a separate font family. Without further modification to these CSS rules, we'd have the following four fonts displayed in the font list in Customizer and Beaver Builder modules:

  • tt_prosto_sans_condensedBdIt
  • tt_prosto_sans_condensedbold
  • tt_prosto_sans_condensedIt
  • tt_prosto_sans_condensedRg

We could change the font-family rules to friendlier names, but we'd still have four fonts listed:

  • TT Prosto Sans Condensed Bold Italic
  • TT Prosto Sans Condensed Bold
  • TT Prosto Sans Condensed Italic
  • TT Prosto Sans Condensed

Here's another way to do it.

Let's group that list into the following two font families:

  • TT Prosto Sans Condensed
  • TT Prosto Sans Condensed Italic

For each of those font families, you'll be able to select Normal (400) or Bold (700) in the font weight field in both Customizer settings for the Beaver Builder Theme and in the Beavber Builder editor.

This is easy to do by keeping all four @font-face rules but changing the font-family values to just two font names.

The following modified CSS code has the following changes from the original:

  • It changes the font-family names to two friendly names: TT Prosto Sans Condensed and TT Prosto Sans Condensed Italic.

  • It changes the file path to the absolute URL where the fonts were uploaded.

  • It changes font-weight to 400 for Regular and 700 for Bold.

  • It removes the font-style property to correct an issue with Safari browsers. (The other browsers are fine with or without the font-style property.)

    /*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
    @font-face {
      font-family: 'TT Prosto Sans Condensed Italic';
      src: url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-bold-italic-webfont.woff2') format('woff2'),
           url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-bold-italic-webfont.woff') format('woff');
      font-weight: 700;
    }

    @font-face {
      font-family: 'TT Prosto Sans Condensed';
      src: url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-bold-webfont.woff2') format('woff2'),
           url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-bold-webfont.woff') format('woff');
      font-weight: 700;
    }

    @font-face {
      font-family: 'TT Prosto Sans Condensed Italic';
      src: url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-italic-webfont.woff2') format('woff2'),
           url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-italic-webfont.woff') format('woff');
      font-weight: 400;
    }

    @font-face {
      font-family: 'TT Prosto Sans Condensed';
      src: url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-regular-webfont.woff2') format('woff2'),
           url('https://example.com/wp-content/themes/bb-theme-child/fonts/prostosanscond-regular-webfont.woff') format('woff');
      font-weight: 400;
    }

Here's what to note about these CSS modifications:

  • Each @font-face rule still points to the appropriate files for each weight.
  • The font-family in each rule is changed to one of the two friendlier font names that will appear in the font selection list in Customizer or the Beaver Builder editor.
  • The font-weight is changed to match the font file in that rule: 400 for normal and 700 for bold.

Add the code to functions.php​

Here's the code to add two fonts with two weights to functions.php in your child theme. The filters make these fonts available as a selection in the Beaver Builder Theme's Customizer settings and in the Typography section in Beaver Builder modules' style settings.

function my_bb_custom_fonts ( $system_fonts ) {

  $system_fonts[ 'TT Prosto Sans Condensed' ] = array(
    'fallback' => 'Verdana, Arial, sans-serif',
    'weights' => array(
      '400',
      '700',
    ),
  );

  $system_fonts[ 'TT Prosto Sans Condensed Italic' ] = array(
    'fallback' => 'Verdana, Arial, sans-serif',
    'weights' => array(
      '400',
      '700',
    ),
  );

    return $system_fonts;
}

//Add to Beaver Builder Theme Customizer
add_filter( 'fl_theme_system_fonts', 'my_bb_custom_fonts' );

//Add to Beaver Builder modules
add_filter( 'fl_builder_font_families_system', 'my_bb_custom_fonts' );

Note that there's still a single function defined for both fonts, but there are two $system_fonts parameters, one for each font. Note also that the two weights defined for each font family in the function will use the correct font files because the files for the two weights are defined for each font family in the CSS rules to load the web font files.