Load and use web fonts not available in your theme

There may be times when you want to use web fonts that your theme doesn't support out of the box. These instructions should work with most themes.

Note: This article applies to web fonts other than Google fonts and TypeKit fonts. See the Related Articles below for more information about loading those types of fonts to work with Beaver Builder..

There are three steps to using web fonts: 

  • Upload the font to your website
  • Load the font with CSS
  • Define where the font will be used
1

Prepare and upload the set of web fonts

  1. If you don't already have a web font set for the font you want to use, you can create one using the Font Squirrel Web Font Generator. It will create the set and download it to your local system.
    Make sure you have an appropriate license to use your font this way.
  2. Upload the web font files to your website. You can upload your font files anywhere, but a good place to put them is in a folder called fonts in your child theme folder. For the Beaver Builder child theme, this is the path:
    wp-content/themes/bb-theme-child/fonts
    This is the location that we'll use in the next procedure.
2

Load the font files with CSS

The @font-face rule in CSS3 loads web fonts and specifies their location. 

  1. Go to the location in your site where you can add CSS rules that apply site-wide. Usually this is Appearance > Customize > Additional
    See the article on  where to add custom CSS rules.
  2. If your web fonts zip file includes a CSS stylesheet, copy the @font-face rule and paste it into your editor. 
    Otherwise, start with the example shown below.
/* Add your custom styles here */
@font-face {
font-family: 'Intro Rust Caps';
src: url('wp-content/themes/bb-theme-child/fonts/introrustg-base2line-webfont.woff2') format('woff2'),
url('wp-content/themes/bb-theme-child/fonts/introrustg-base2line-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
	
  1. In the code you've inserted, modify the url lines in the src attribute if necessary to include all and only the file types that you uploaded. Most often these are woff and woff2.
  2. Modify the url path if necessary to make it relative to the stylesheet file location.
    If you used  Customize > Additional CSS to add this CSS rule, the CSS is in database, and the correct relative path starts with wp-content. If you're using the Beaver Builder child theme and you uploaded the font files to the fonts subdirectory, you don't need to modify the path given in this code example.
  3. Change the value of font-family to be what you want to show when you inspect the CSS rules for an element in your browser. This will also be the name that appears in your Customizer list of fonts, if you choose that option in the next procedure.
    Note: If you plant to insert the font into the Customizer list, don't use hyphens for the font-family value.
3

Specify where the font will be used

There are two ways to specify where the font will appear. If you have Beaver Builder Theme, you can add the font to the list that appears in various places in the Customizer. Then you can choose the web font just like you choose any other font. 

For other themes, or to override font selection in the Beaver Builder Theme Customizer, you can use CSS rules to assign the font to the locations you specify. 

You can use both options if you want to choose the font in Customizer as well as add some CSS for it to appear in some special places on your site.

Option 1: Add the web font to the font lists in Customizer (Beaver Builder Theme)

Here's how to add the web font as a System font in the Customizer font list wherever it appears. This way, you can select the web font just like you'd select any other font. 

  1. Open the Beaver Builder child theme's functions.php file in a text editor.
    This file is located at 
    wp-content/themes/bb-theme-child/fonts
  2. Add the following code at the end of the file.
add_filter( 'fl_theme_system_fonts', 'IntroRustCaps' );
function IntroRustCaps( $system ) {
    $system[ 'Intro Rust Caps' ] = array(
            "fallback" => "Verdana, Arial, sans-serif",
            "weights"  => array(
                "300",
                "400",
                "700",
            )
    );
    return $system;
}
	
  1. Change the $system parameter to match the font-family value you used in the CSS rule in the previous procedure.
  2. Change the fallback font list if you want. For example, if you're adding a serif web font, you might want to change the fallback to the following:
    "fallback" => "'Times New Roman',Times, serif",
  3. Change the font weights to match the weights of your web font. The CSS in the previous procedure had only one weight:
    font-weight: normal;
    The "normal" value corresponds to a font weight of 400, so in the PHP code, delete the '"300" and "700" lines to create an array with one member, as folllows.
    $system[ 'Intro Rust Caps' ] = array(
            "fallback" => "Verdana, Arial, sans-serif",
            "weights"  => array(
                "400",
            )
	

The values you provide in this PHP code creates field values in the Customizer font list as shown in the following screenshot.

Option 2: Add CSS rules to determine where the web font is used

  1. Go to the location in your site where you can add CSS rules that apply site-wide. Usually this is Appearance > Customize > Additional
    See the article on  where to add custom CSS rules.
  2. Add rules to show where you want the font to be used, as in this example. Substitute the name of your custom font family from the previous rule. You can use different fallback fonts besides Arial and sans-serif. 
/* Use this rule to apply the custom font to headings */
h1,h2,h3,h4,h5,h6 {
font-family: 'simplificasimplifica', Arial, sans-serif;
}

/* Use this rule to apply the custom font to paragraphs */
p {
font-family: 'simplificasimplifica', Arial, sans-serif;
}

/* Use this rule to make the custom font the default font */
body {
font-family: 'simplificasimplifica', Arial, sans-serif !important;
}

/* Use this rule to apply the custom font to menu items */
.fl-page-nav .navbar-nav, .fl-page-nav .navbar-nav a {
font-family: 'simplificasimplifica', Arial, sans-serif;
}