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 Page 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.

In the Customizer and Page Builder font selections, there's a choice of font by name and font weight, but no ability to choose regular or italic style in the Customizer or Page Builder font selection section. So let's list 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 Customizer and Page Builder.

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, and it assigns one name to both regular weights and one name to the bold weights.
  • It changes the file path to point to 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('prostosanscond-bold-italic-webfont.woff2') format('woff2'),
         url('prostosanscond-bold-italic-webfont.woff') format('woff');
    font-weight: 700;
}

@font-face {
    font-family: 'TT Prosto Sans Condensed';
    src: url('prostosanscond-bold-webfont.woff2') format('woff2'),
         url('prostosanscond-bold-webfont.woff') format('woff');
    font-weight: 700;
}


@font-face {
    font-family: 'TT Prosto Sans Condensed Italic';
    src: url('prostosanscond-italic-webfont.woff2') format('woff2'),
         url('prostosanscond-italic-webfont.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'TT Prosto Sans Condensed';
    src: url('prostosanscond-regular-webfont.woff2') format('woff2'),
         url('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 Page Builder.
  • 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

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 Page 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.